javascript 通过单击删除当前 tr - Html

在前端开发中，经常需要使用 JavaScript 对 HTML 元素进行操作。本篇文章将介绍如何使用 JavaScript 通过单击删除当前 tr。

HTML 结构

首先，我们需要在 HTML 中创建一个表格，并为其中的每一行添加一个删除按钮。

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1-1</td>
      <td>内容1-2</td>
      <td>内容1-3</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
    <tr>
      <td>内容2-1</td>
      <td>内容2-2</td>
      <td>内容2-3</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
    <tr>
      <td>内容3-1</td>
      <td>内容3-2</td>
      <td>内容3-3</td>
      <td><button onclick="deleteRow(this)">删除</button></td>
    </tr>
  </tbody>
</table>

JavaScript 实现

在 JavaScript 中，我们需要定义一个名为 deleteRow 的函数来实现删除操作。该函数需接收一个参数，即删除按钮本身。

函数的实现可以分为以下三个步骤：

1. 获取点击按钮所在的行

var row = button.parentNode.parentNode;

2. 通过获取到的行获取到其在表格中的位置

var index = row.rowIndex;

3. 通过表格的 deleteRow 方法删除该行

row.parentNode.deleteRow(index);

完整的 JavaScript 代码如下：

<script>
  function deleteRow(button) {
    var row = button.parentNode.parentNode;
    var index = row.rowIndex;
    row.parentNode.deleteRow(index);
  }
</script>

实现效果

通过以上的操作，我们已经成功实现了通过单击删除当前 tr 的效果。点击按钮后，相应的行将会被删除。

注：样式可自行添加。

总结

本篇文章介绍了如何使用 JavaScript 实现通过单击删除当前 tr 的功能，主要涉及到 HTML 结构和 JavaScript 代码的编写。在实际开发过程中，我们可以根据需要对该功能进行调整和扩展。