📜  从表 jquery 中删除第一行 - Javascript (1)

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

从表 jquery 中删除第一行 - JavaScript

当我们使用 jQuery 操作表格时,有时需要删除表格中的一行数据。本文将介绍如何使用 jQuery 从表格中删除第一行数据。

HTML 表格

首先,我们需要准备一张 HTML 表格,如下所示:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
jQuery 删除表格行

我们可以使用 jQuery 的 eq() 方法获取表格中的第一行,使用 remove() 方法将其从文档中删除。

$(document).ready(function() {
  $('#myTable tbody tr').eq(0).remove();
});

该代码将删除表格中的第一行数据。我们使用 $(document).ready() 方法,确保当页面加载完成后再执行删除操作。

完整示例

下面是完整的 HTML 文件示例,其中包含了上述代码和表格 HTML。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>删除表格中的第一行数据</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#myTable tbody tr').eq(0).remove();
    });
  </script>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>18</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
结论

使用 jQuery 删除表格中的第一行非常简单,只需使用 eq() 方法获取第一行,再使用 remove() 方法将其从文档中删除即可。