jquery 批量删除

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等Web开发任务，在这篇文章中，我们将学习如何使用jQuery实现批量删除功能。

1、我们需要引入jQuery库，在HTML文件中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2、接下来，我们创建一个简单的HTML表格，用于演示批量删除功能：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>王五</td>
    <td>35</td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
</table>

3、现在，我们使用jQuery编写批量删除功能的代码：

$(document).ready(function() {
  // 为所有删除按钮绑定点击事件
  $(".deleteBtn").on("click", function() {
    // 获取当前行的索引
    var rowIndex = $(this).closest("tr").index();
    // 获取表格对象
    var table = $("#myTable");
    // 删除当前行
    table.find("tr").eq(rowIndex).remove();
  });
});

在上面的代码中，我们首先为所有带有deleteBtn类的元素绑定了一个点击事件，当点击事件发生时，我们首先获取当前行的索引，然后获取表格对象，我们使用remove()方法删除当前行。

4、现在，当我们点击任意一个“删除”按钮时，对应的行将被删除，如果需要实现批量删除功能，我们可以添加一个全选/取消全选按钮，以便用户选择要删除的行，以下是完整的HTML和JavaScript代码：

<div id="selectAll">全选/取消全选</div>
<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><input type="checkbox" class="selectRow"></td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td><input type="checkbox" class="selectRow"></td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
  <tr>
    <td>王五</td>
    <td>35</td>
    <td><input type="checkbox" class="selectRow"></td>
    <td><button class="deleteBtn">删除</button></td>
  </tr>
</table>

$(document).ready(function() {
  // 为全选/取消全选按钮绑定点击事件
  $("#selectAll").on("click", function() {
    // 获取所有选中框的状态并反转，实现全选/取消全选功能
    $(".selectRow").prop("checked", function(i, checked) {
      return !checked;
    });
  });
  // 为所有删除按钮绑定点击事件（注意这里需要使用事件委托）
  $("body").on("click", ".deleteBtn", function() {
    // 如果存在至少一个选中的行，则执行批量删除操作；否则，弹出提示信息并返回false，阻止默认行为（即不执行删除操作）
    if ($(".selectRow:checked").length > 0) {
      var selectedRows = $(".selectRow:checked"); // 获取所有选中的行（包括复选框本身）的集合对象
      selectedRows.parents("tr").each(function() { // 遍历选中的行集合对象中的每个元素（即每行）的父级元素（即表格行）... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...