使用按钮 html 删除特定行

在开发 Web 应用程序时，我们常常需要在前端实现对数据表格的增删改查操作。其中，删除操作是非常常见且重要的一种操作。本文将介绍如何使用 HTML 和 JavaScript 实现删除数据表格中特定行的功能。

方案概述

我们将在 HTML 页面上通过添加一个按钮来触发删除操作。当用户点击该按钮时，我们将获取要删除的行所在的 DOM 元素，然后从 DOM 树中删除该元素，最后更新数据表格的样式。

具体实现方案如下：

1. 在 HTML 页面上创建一个数据表格，同时添加一个“删除行”按钮；
2. 为“删除行”按钮添加点击事件监听器，在事件处理函数中获取需要删除的行的 DOM 元素；
3. 从 DOM 树中删除该行元素；
4. 更新数据表格的样式，例如重新计算数据表格中的行序号。

代码实现

以下是 HTML 和 JavaScript 代码的实现，用于删除指定行的数据表格。

<table id="myTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>30</td>
      <td><button onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>25</td>
      <td><button onclick="deleteRow(this)">Delete</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>45</td>
      <td><button onclick="deleteRow(this)">Delete</button></td>
    </tr>
  </tbody>
</table>

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

  // update table row numbers
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  for (var i = 1; i < rows.length; i++) {
    rows[i].getElementsByTagName("td")[0].innerText = i;
  }
}

以上代码演示了如何在数据表格中实现删除指定行的功能。其中：

• deleteRow 函数接收一个参数 btn，该参数为调用该函数的按钮元素；
• 在函数中，我们通过获取 btn 元素的父元素 td，再获取 td 的父元素 tr，即可获取需要删除的行元素 row；
• 使用 parentNode.removeChild 方法从 DOM 树中移除该行元素；
• 最后更新数据表格的行序号，即表头中的序号和数据表格中每行的序号。

总结

本文介绍了如何使用 HTML 和 JavaScript 删除数据表格中特定行的功能。该方案易于实现并且适用于大多数 Web 应用程序。