利用js动态添加删除table行的示例代码

当需要在网页中展示和处理数据时，使用table是一种非常常见的方式。在一些场景下，需要动态地添加或删除表格行，这就需要使用JavaScript进行操作。下面是一份利用js动态添加删除table行的示例代码攻略。

1. HTML结构

首先，我们需要在HTML中定义一个table，标记好每一列的thead和tbody，并预留出一行作为模板行。

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr class="template-row">
      <td></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>
<button id="add-btn">添加一行</button>

上面的代码中，我们为表格定义了一个id为table-body的tbody元素，用于动态添加或删除行。另外，我们还为添加按钮定义了一个id为add-btn，用于触发添加行的操作。

注意到上面的代码中，我们用了一个带有class为template-row的行作为模板行。这个行的所有内容都为空，但是我们预先在它的删除按钮上绑定了一个事件监听器，用于删除点击它的那一行。这里可以采用jQuery或者纯原生js绑定事件。

// jQuery实现删除事件的绑定
$("table").on("click", ".delete-btn", function() {
  $(this).closest("tr").remove();
});

// 原生js实现删除事件的绑定
var deleteBtns = document.querySelectorAll(".delete-btn");
for (var i = 0; i < deleteBtns.length; i++) {
  deleteBtns[i].addEventListener("click", function() {
    this.closest("tr").remove();
  });
}

2. 添加行操作

在添加一行操作时，我们需要克隆一份模板行，并清空它的内容。这个操作可以通过在原模板行上调用cloneNode方法来完成，同时还要将新行的删除按钮与删除事件进行绑定。

$("#add-btn").on("click", function() {
  var newRow = $(".template-row").clone().removeClass("template-row");
  newRow.find("input").val("");
  newRow.appendTo("#table-body");
  newRow.find(".delete-btn").on("click", function() {
    $(this).closest("tr").remove();
  });
});

// 原生js实现添加操作
var addBtn = document.querySelector("#add-btn");
addBtn.addEventListener("click", function() {
  var templateRow = document.querySelector(".template-row");
  var newRow = templateRow.cloneNode(true);
  newRow.classList.remove("template-row");
  newRow.querySelectorAll("input").forEach(function(input) {
    input.value = "";
  });
  newRow.querySelector(".delete-btn").addEventListener("click", function() {
    this.closest("tr").remove();
  });
  document.querySelector("#table-body").appendChild(newRow);
});

3. 示例说明

下面举两个操作的示例说明。

3.1 添加行

（1）点击添加按钮，会在表格最后新增一行，行的所有输入框都为空。

（2）在新添加的行中将姓名和年龄的输入框填入相应的值，新行的删除按钮也是可用的。

3.2 删除行

（1）在任何一行的删除按钮上点击一下，这一行会被即时删除。

（2）即使删除的是最后一行，添加操作也能正常地在删除后继续新增新的行。

通过以上的两个操作示例，我们可以很清楚地看到整个动态添加删除表格行的示例的基本流程。