如何使用 JavaScript DOM 在表格上制作删除按钮

在JavaScript中，我们可以使用DOM（文档对象模型）来操作HTML元素。通过使用DOM，我们可以动态地向表格中添加和删除行，并通过添加事件处理程序来添加按钮的删除功能。

下面是一个简单的示例，演示了如何使用JavaScript DOM在表格上制作删除按钮。

HTML部分

首先，我们需要在HTML中创建一个表格，以及一个按钮用于删除行。下面是一个示例的HTML代码片段：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="deleteBtn">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="deleteBtn">Delete</button></td>
    </tr>
  </tbody>
</table>

在上述示例中，我们为每个要删除的行添加了一个带有deleteBtn类的按钮。

JavaScript部分

然后，我们需要使用JavaScript来添加删除按钮的功能。我们将使用事件委托来处理按钮点击事件，这样我们就可以在表格后续动态添加的行上操作。以下是JavaScript代码片段：

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('deleteBtn')) {
    var row = event.target.parentNode.parentNode;
    row.parentNode.removeChild(row);
  }
});

上述代码添加了一个全局的click事件监听器，当用户点击任何地方时触发。在事件处理程序中，我们首先检查被点击的元素是否具有deleteBtn类。如果是，则找到其父级的父级元素（即行）并将其从DOM中移除。

结论

通过使用JavaScript DOM，我们可以轻松地在表格上制作删除按钮。上述示例演示了如何通过点击删除按钮来删除表格中的行。您可以根据自己的需求进行修改和扩展代码。

希望这个简短的介绍能够帮助您理解如何使用JavaScript DOM来制作删除按钮，并为表格添加删除功能。