js实现添加删除表格操作

针对“js实现添加删除表格操作”的问题，我将提供一份完整攻略，包含以下步骤：

1. HTML结构
   首先需要构建一个表格的HTML结构，具体代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>28</td>
      <td>[e-mail]</td>
      <td><button onclick="deleteRow(this)">Delete</button></td>
    </tr>
  </tbody>
</table>

1. 添加行
   我们可以通过使用JavaScript来添加表格的行，使用 insertRow 方法添加新的行。例如，在点击一个按钮后，添加一行新的数据到表格中，代码如下：

function addRow() {
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var email = document.getElementById("email").value;

  var table = document.getElementById("myTable");
  var row = table.insertRow();
  var nameCell = row.insertCell(0);
  var ageCell = row.insertCell(1);
  var emailCell = row.insertCell(2);
  var actionCell = row.insertCell(3);

  nameCell.innerHTML = name;
  ageCell.innerHTML = age;
  emailCell.innerHTML = email;
  actionCell.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
}

上面代码中，我们首先获取了对应文本框的值，并通过 insertRow 方法新建一行。然后，我们将新的数据插入到对应的单元格中，并添加一个删除按钮。

1. 删除行
   怎么删除表格中的一行呢？我们可以使用JavaScript的 removeChild 方法来完成这个任务。对于还没有熟悉 removeChild 方法的同学，简单来讲，它可以删除指定的一个子节点。以下是一个删除行的示例代码：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

上面的代码中，我们首先找到当前被点击的按钮所在的行，然后通过 removeChild 方法将这一行从表格中删除。

综上，我提供了以上三个步骤，完整攻略的细节可以参考上面的示例代码。