JS动态增删表格行的方法

下面是详细讲解“JS动态增删表格行的方法”的完整攻略。

动态增加表格行

步骤一：创建表格

我们首先需要在页面上创建一个表格，可以采用以下标准的HTML代码来创建一个包含表格头部的表格：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

步骤二：编写JavaScript代码实现动态添加表格行

接下来，我们需要编写JavaScript代码来实现动态添加表格行。下面是示例代码：

const tableBody = document.querySelector('tbody'); // 获取表格的tbody元素

function addTableRow(name, age, gender) {
  const newRow = document.createElement('tr'); // 创建新行元素
  newRow.innerHTML = `
    <td>${name}</td>
    <td>${age}</td>
    <td>${gender}</td>
  `; // 设置新行元素的内容
  tableBody.appendChild(newRow); // 将新行元素添加到表格的tbody中
}

该示例代码中，我们首先获取了表格的tbody元素，然后编写了一个addTableRow函数，用来新增一行表格数据。在该函数中，我们首先创建了一个新的tr元素，然后设置该元素的内容，最后将该元素添加到表格的tbody中。

接下来，我们可以在需要添加表格行的地方，调用该函数，例如：

addTableRow('张三', 18, '男');
addTableRow('李四', 20, '女');

该示例代码中，我们分别添加了两行表格数据，分别为“张三”，“李四”。

动态删除表格行

步骤一：创建表格

同样地，我们需要在页面上创建一个包含表格头部的表格。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
      <td>
        <button onclick="deleteTableRow(this)">删除</button>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
      <td>
        <button onclick="deleteTableRow(this)">删除</button>
      </td>
    </tr>
  </tbody>
</table>

该示例代码中，我们在表格的每一行数据最后添加了一个“删除”按钮，点击该按钮可以删除当前行。

步骤二：编写JavaScript代码实现动态删除表格行

接下来，我们需要编写JavaScript代码来实现动态删除表格行。下面是示例代码：

function deleteTableRow(button) {
  const row = button.parentNode.parentNode; // 找到当前行元素
  row.parentNode.removeChild(row); // 删除当前行元素
}

该示例代码中，我们编写了一个deleteTableRow函数，用来删除当前行的数据。在该函数中，我们首先找到了当前行元素，然后通过parentNode属性找到当前行的父元素——tbody，最后使用removeChild方法将当前行元素从tbody中删除。

至此，我们已经完成了动态添加和删除表格行的代码编写。