表格添加、删除某一行

系统管理员 2024-02-17 23:05 179阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script>
  7.             window.onclick = function(){
  9.                 var oTab = document.getElementById("tab1");
  10.                 var aTr = oTab.tBodies[0].rows;
  12.                 var oBtn =  document.getElementById("btn1");
  13.                 var iD = aTr.length + 1;
  14.                // alert(iD);
  15.                 oBtn.onclick = function(){
  16.                 var oName = document.getElementById("name");
  17.                 var oAge = document.getElementById("age");
  18.                 var oT = document.createElement("tr");
  20.                     var Td1 = document.createElement("td");
  21.                     Td1.innerHTML = iD++;
  22.                     oT.appendChild(Td1);
  24.                     var Td2 = document.createElement("td");
  25.                     Td2.innerHTML = oName.value;
  26.                     oT.appendChild(Td2);                    
  28.                     var Td3 = document.createElement("td");
  29.                     Td3.innerHTML = age.value;
  30.                     oT.appendChild(Td3);
  32.                     var Td4 = document.createElement("td");
  33.                     Td4.innerHTML = '<a href = "javascript:;">删除</a>';
  34.                     oT.appendChild(Td4);
  36.                     oTab.tBodies[0].appendChild(oT);
  37.                 }
  39.                 var aA = document.getElementsByTagName("a");
  40.                 for(var i = 0; i < aA.length; i++){
  41.                  aA[i].onclick = function (){
  42.                      oTab.tBodies[0].removeChild(this.parentNode.parentNode);
  43.                   }
  44.                 }
  45.             }
  46.         </script>
  48.     </head>
  49.     <body>
  50.         姓名：<input id = "name" type="text"/>
  51.         年龄：<input id = "age" type = "text"/>
  52.         <input id = "btn1" type = "button" value = "添加行"/>
  53.         <table border="1px" width="500px" id = "tab1">
  54.             <thead>
  55.                 <td>ID</td>
  56.                 <td>姓名</td>
  57.                 <td>年龄</td>
  58.                 <td>操作</td>
  59.             </thead>
  60.             <tbody>
  61.                 <tr>
  62.                     <td>1</td>
  63.                     <td>blue</td>
  64.                     <td>27</td>
  65.                     <td></td>
  66.                 </tr>
  67.                 <tr>
  68.                     <td>2</td>
  69.                     <td>张三</td>
  70.                     <td>36</td>
  71.                     <td></td>
  72.                 </tr>
  73.                 <tr>
  74.                     <td>3</td>
  75.                     <td>李斯</td>
  76.                     <td>47</td>
  77.                     <td></td>
  78.                 </tr>                
  79.             </tbody>
  80.         </table>
  82.     </body>
  83. </html>

发表评论

表情：
评论列表 （有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读