li.的博客
li.的首页 > li.的博客 > 浏览文章

js增加删除节点

分类:javascript  人气:1934  评论:0  时间:2010-01-21 16:07

 <!-- 用于添加节点的按钮 -->
 <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>

评论(0)
暂无评论
我来评论
(800字以内)