删除 tr 在 jquery 中具有删除图标 - Javascript (1)

📌 相关文章

📜 删除 tr 在 jquery 中具有删除图标 - Javascript (1)

📅 最后修改于: 2023-12-03 15:07:14.191000 🧑 作者: Mango

删除 tr 在 jQuery 中具有删除图标 - Javascript

在这篇文章中，我们将介绍如何使用 jQuery 删除表格中的行（tr），并添加一个删除图标以便更直观地展示删除操作。以下将为您提供详细说明和示例代码。

步骤 1：为删除操作添加图标

为了使删除操作更直观地显示，我们需要为每一行添加一个删除图标。我们可以使用 Font Awesome 提供的图标，也可以使用其他任何想要的图标库。

以下是使用 Font Awesome 的示例代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-3Wq3o6Yl0Zz+H5Bg5W/5NWGv/7SyARfvo6anxUWBG3qMvBVEHb5N5TR5skWzs8LSlItAa9Xdxkb/Cx2FJj8fzA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td><i class="fas fa-trash-alt"></i></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td><i class="fas fa-trash-alt"></i></td>
    </tr>
  </tbody>
</table>

在上面的示例代码中，我们通过添加一个包含 Font Awesome“垃圾桶”图标的 i 元素来为每行添加一个删除图标。

步骤 2：使用 jQuery 删除行

接下来，我们将使用 jQuery 来删除表格中的行。

以下是一个简单的示例代码：

$(document).ready(function() {
  $("#myTable").on("click", ".delete-row", function() {
    $(this).closest("tr").remove();
  });
});

在上面的示例代码中：

$(document).ready(function() {...}); 将代码放置在文档已准备好之后执行的函数中。
$("#myTable") 选择表格元素。
.on("click", ".delete-row", function() {...}) 将单击事件绑定到“删除行”按钮。
$(this).closest("tr").remove(); 找到最接近的 tr 元素并将其删除。

请注意，我们使用了 on 方法来绑定单击事件。这使得我们可以在表格中添加或删除行，而不必重新绑定事件。

完整示例代码

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-3Wq3o6Yl0Zz+H5Bg5W/5NWGv/7SyARfvo6anxUWBG3qMvBVEHb5N5TR5skWzs8LSlItAa9Xdxkb/Cx2FJj8fzA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td><i class="fas fa-trash-alt delete-row"></i></td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>jane@example.com</td>
        <td><i class="fas fa-trash-alt delete-row"></i></td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#myTable").on("click", ".delete-row", function() {
        $(this).closest("tr").remove();
      });
    });
  </script>
</body>
</html>

以上是完整的示例代码。通过使用 jQuery，我们可以轻松地为表格中的行添加删除图标，并添加一个单击事件来删除行。

希望这篇文章能对你起到帮助作用！