📌  相关文章
📜  如何使用 jQuery 从表中删除表行？(1)

📅  最后修改于: 2023-12-03 14:51:57.906000             🧑  作者: Mango

如何使用 jQuery 从表中删除表行？

在 web 应用程序中，表格是一个常用的元素。有时候，我们需要从表格中删除某些行。使用 jQuery，我们可以很容易地完成这个任务。

HTML 表格

首先，我们需要一个 HTML 表格。下面是一个例子：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
删除表行

要删除表行，我们可以使用 jQuery 的 remove() 方法。这个方法可以从 DOM 中删除一个元素。

先来看一下基本的用法：

$(selector).remove();

其中，selector 是一个 CSS 选择器，用来选择要删除的元素。

在我们的例子中，我们可以这样写：

$('tbody tr:eq(1)').remove();

这段代码将删除表格中的第二行。

事件触发

如果你需要在用户点击行时删除这一行，那么可以使用 jQuery 的事件机制。

先给每行绑定点击事件：

$('tbody tr').click(function() {
  $(this).remove();
});

这段代码会在用户点击表格行时删除这一行。

完整代码

下面是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <title>删除表行</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }

    tr:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>30</td>
        <td>男</td>
      </tr>
    </tbody>
  </table>

  <script>
    $('tbody tr').click(function() {
      $(this).remove();
    });
  </script>
</body>
</html>

在这个例子中，我们通过 CSS 设置了表格的样式，并使用 jQuery 给每行绑定了点击事件。用户点击一行时，这一行会被删除。