JavaScript实现表格删除功能

在网页开发中，表格是展示数据的常用方式。而实现表格删除功能，能让用户灵活管理表格中的信息，提升用户体验。下面我们就来探讨如何使用JavaScript实现表格删除功能。

创建一个简单的HTML表格。例如：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
</table>

这里每个表格行都有一个“删除”按钮，并且为按钮添加了点击事件onclick="deleteRow(this)"。

接下来，编写关键的JavaScript代码：

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

在这段代码中，deleteRow函数接收按钮对象btn作为参数。btn.parentNode获取按钮的父元素（即<td>元素），再次使用parentNode获取<tr>元素。然后，获取表格对象table，通过table.removeChild(row)方法，将当前行从表格中移除，从而实现删除功能。

这种直接在HTML标签中绑定点击事件的方式简单直观，但在大型项目中不利于代码维护。我们也可以采用事件委托的方式来实现。

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td><button class="delete-btn">删除</button></td>
  </tr>
</table>

document.addEventListener("DOMContentLoaded", function () {
  var table = document.getElementById("myTable");
  table.addEventListener("click", function (event) {
    if (event.target.classList.contains("delete-btn")) {
      var row = event.target.parentNode.parentNode;
      table.removeChild(row);
    }
  });
});

在这段代码中，通过addEventListener监听表格的点击事件。当点击的元素包含delete-btn类名时，执行删除操作。这种方式将事件处理逻辑集中在JavaScript代码中，使得代码结构更清晰，维护起来更方便。

通过JavaScript实现表格删除功能，无论是简单的直接绑定事件还是采用事件委托，都能为网页交互带来更好的体验，满足用户对数据灵活操作的需求。