JS动态增加行自己写的一个DEMO

来源:互联网 发布:ubuntu 删除命令 编辑:程序博客网 时间:2024/05/07 06:48

旨在记录每天所学,如果有更好的建议欢迎大家指点:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 动态增加行demo </title>
  <script type="text/javascript">
  var rownum=1;
  //增加一行
  function addRow(){
   rownum=rownum+1;
   var divHtml="<div id='row"+rownum+"'><li>第一行&nbsp;&nbsp;<a onclick='addRow()'>增加</a>&nbsp;&nbsp;<a onclick='delRow("+rownum+")'>删除</a></li></div>";
   document.getElementById("addDiv").innerHTML+=divHtml;
  }
  //删除一行
  function delRow(index){
   document.getElementById("row"+index).removeNode(true);
  }
  </script>
 </head>

 <body>
  <div id="addDiv">
   <div id="row1">
    <li>第一行&nbsp;&nbsp;<a onclick="addRow()">增加</a>&nbsp;&nbsp;<a onclick="delRow(1)">删除</a></li>
   </div>
  </div>
 </body>
</html>

原创粉丝点击