正文

JavaScript轻松删除表格中的行：掌握简单代码，告别手动操作烦恼

/0 浏览量
0625

在网页开发中，表格是一个常用的元素，用于展示数据。然而，手动删除表格中的行往往既耗时又容易出错。使用JavaScript，我们可以轻松实现自动删除表格行的功能，大大提高工作效率。本文将介绍如何使用JavaScript编写简单代码，实现表格行的删除。

1. 准备工作

在开始编写代码之前，我们需要准备以下内容：

  • 一个HTML表格，其中包含要删除的行。
  • 一个按钮，用于触发删除行的操作。

以下是一个简单的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>

2. 编写JavaScript代码

接下来，我们需要编写一个JavaScript函数，用于删除表格中的行。这个函数将接受一个按钮元素作为参数，并找到与该按钮关联的行，然后将其删除。

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

这段代码中，btn.parentNode.parentNode表示找到按钮所在的行。然后，使用row.parentNode.removeChild(row)将行从表格中删除。

3. 完整示例

将上述HTML和JavaScript代码整合到一起，我们得到以下完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript删除表格行</title>
</head>
<body>
  <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>

  <script>
    function deleteRow(btn) {
      var row = btn.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  </script>
</body>
</html>

4. 总结

通过以上示例，我们可以看到，使用JavaScript删除表格中的行非常简单。只需编写一个简单的函数，并为其绑定一个按钮的点击事件即可。这样，我们就可以轻松实现表格行的自动删除，提高工作效率。希望本文能帮助到您！

-- 展开阅读全文 --