jQuery删除table除了第一行的行|极客教程

jQuery删除table除了第一行的行

在网页开发中，经常会遇到需要通过JavaScript来操作表格的情况。有时候我们需要删除表格中的一些行，但又不想删除表格的第一行。本文将介绍如何使用jQuery来删除表格中除了第一行之外的其他行。

首先，我们需要一个示例表格

让我们先创建一个简单的HTML表格，包含一些行和列，如下所示：

<table id="myTable" border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
  </tr>
</table>

上面代码定义了一个ID为“myTable”的表格，其中包含一个表头行和三个数据行。我们的目标是删除这些数据行中除了第一行以外的所有行。

使用jQuery删除表格行

下面是使用jQuery来实现删除表格行的代码：

$(document).ready(function(){
  $("#myTable tr:not(:first)").remove();
});

这段代码首先等待文档加载完成后执行，然后使用jQuery选择器选择除了第一行以外的所有<tr>元素，并调用remove()方法删除它们。

运行示例代码

让我们把上面的HTML表格和JavaScript代码放在一起，看看效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Delete Table Rows with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>
  <h2>Original Table</h2>
  <table id="myTable" border="1">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>28</td>
    </tr>
  </table>

  <h2>Table after deleting rows with jQuery</h2>
  <table id="myTable" border="1">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>

  <script>
     $(document).ready(function(){$ ("#myTable tr:not(:first)").remove();
    });
  </script>
</body>
</html>

在上面的示例中，我们先展示了原始的表格，然后使用jQuery删除了除了第一行外的所有行。页面加载后，你将会看到只剩下表头行的表格。