正文

轻松掌握：用jQuery轻松实现表格行的动态删除操作，告别手动删除烦恼

/0 浏览量
0417

在网页开发中，表格是一个常用的组件，用于展示和操作数据。而手动删除表格行不仅效率低下，还容易出错。今天，我们就来学习如何使用jQuery轻松实现表格行的动态删除操作，让你的工作变得更加轻松高效。

准备工作

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

  1. HTML表格结构
  2. jQuery库

以下是HTML表格的一个简单示例：

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

实现步骤

  1. 引入jQuery库
  2. 为删除按钮添加点击事件
  3. 在事件处理函数中，删除当前行

1. 引入jQuery库

在HTML文件中，引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 为删除按钮添加点击事件

为每个删除按钮添加点击事件：

<button class="deleteRow">删除</button>

3. 在事件处理函数中，删除当前行

在jQuery中，我们可以使用.closest()方法找到当前按钮所在的行，并使用.remove()方法删除该行：

$(document).ready(function() {
  $('.deleteRow').click(function() {
    $(this).closest('tr').remove();
  });
});

完整代码

以下是完整的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格行动态删除</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td><button class="deleteRow">删除</button></td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td><button class="deleteRow">删除</button></td>
      </tr>
    </tbody>
  </table>

  <script>
    $(document).ready(function() {
      $('.deleteRow').click(function() {
        $(this).closest('tr').remove();
      });
    });
  </script>
</body>
</html>

通过以上步骤，你就可以轻松实现表格行的动态删除操作，告别手动删除的烦恼。希望这个教程对你有所帮助！

-- 展开阅读全文 --