js动态增加，删除行

最新推荐文章于 2022-07-21 11:26:27 发布

原创最新推荐文章于 2022-07-21 11:26:27 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #border #function

<html>
<script>
  function addRow() {
   var editTable = document.getElementById("editTable");
   var newTR = editTable.insertRow(editTable.rows.length);

   var newTD0 = newTR.insertCell(0);
   var newTD1 = newTR.insertCell(1);
   var newTD2 = newTR.insertCell(2);
   var newTD3 = newTR.insertCell(3);

   newTD0.innerHTML = newTR.rowIndex.toString();
   newTD1.innerHTML = "<input type='text' />";
   newTD2.innerHTML = "<input type='text' />";
   newTD3.innerHTML = "<input type='button' value='删除' onclick='delRow(this.parentNode.parentNode.rowIndex)' />";
  }

  function delRow(obj) {
   document.getElementById("editTable").deleteRow(obj);

   var editTable = document.getElementById("editTable");
   var i = 1;
   while(i < editTable.rows.length) {
    editTable.rows[i].cells[0].innerHTML = i.toString();
    i++;
   }
  }
</script>

<body>
  <input type="button" value="addRow" onclick="addRow()" />
  <table id="editTable" border="1">
   <tr>
    <td>id</td>
    <td>姓名</td>
    <td>工号</td>
    <td>删除</td>
   </tr>
  </table>
</body>
</html>