li.的博客
|
<!-- 用于添加节点的按钮 -->
<input id="add" type="button" value="增加"/>
<!-- 用于删除节点的按钮 -->
<input id="del" type="button" value="删除" disabled="true"/>
<script>
//定义页面动态增加、删除的节点
var a ;
//创建一个表格节点
a = document.createElement("table");
//设置表格边框
a.border=1;
//循环为表格增加5行
for (var i = 0 ; i < 5 ; i++)
{
//循环为表格的每行增加7个单元格
var tr = a.insertRow(i);
for (var j = 0 ; j < 7 ; j++)
{
var td = tr.insertCell(j);
td.innerHTML = "单元格内容 " + i + j;
}
}
//页面添加节点
function add()
{
//让“增加”按钮失效
document.getElementById("add").disabled = true;
//将表格添加到页面中
document.getElementById("test").appendChild(a);
//让“删除”按钮生效
document.getElementById("del").disabled = false;
}
//页面删除节点
function del()
{
//让“删除”按钮失效
document.getElementById("del").disabled = true;
//从页面中删除表格
document.getElementById("test").removeChild(a);
//让“增加”按钮生效
document.getElementById("add").disabled = false;
}
//为两个按钮绑定事件处理函数
document.getElementById("add").onclick = add;
document.getElementById("del").onclick = del;
</script>