📌  相关文章
📜  jquery 从表中删除所有 tr - Javascript (1)

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

jQuery删除表格中的所有行

给表格添加和删除行是网页开发中很常见的任务。在本篇文章中，我们将通过 jQuery 删除表格中的所有行。让我们开始吧！

步骤1：编写 HTML 代码

首先，我们需要编写 HTML 代码来创建一个简单的表格。具体代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
步骤2：用 jQuery 删除所有行

为了删除所有行，我们需要使用 jQuery 的 .remove() 方法。具体代码如下：

$(document).ready(function(){
  $("#myTable tbody tr").remove(); 
});

以上代码首先使用 jQuery 的 $(document).ready() 函数，在页面加载完毕后立即执行函数中的代码。接着，它使用 jQuery 选择器 $("#myTable tbody tr") 来选中表格 tbody 中的所有行，然后使用 .remove() 方法来删除它们。

步骤3：完成代码并测试

最后，我们需要将步骤1和步骤2中的代码整合起来，并将它们放到一个 HTML 文件中。然后，我们打开该文件，就可以看到所有行都已从表格中删除了。

<!DOCTYPE html>
<html>
  <head>
    <title>Delete All Rows from Table Using jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>女</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>28</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
    <script>
      $(document).ready(function(){
        $("#myTable tbody tr").remove(); 
      });
    </script>
  </body>
</html>

现在，你已经成功地删除了表格中的所有行！

总结

在这篇文章中，我们介绍了如何使用 jQuery 删除表格中的所有行的方法。首先，我们编写了一个简单的表格，然后使用 jQuery 的 .remove() 方法删除了表格 tbody 中的所有行。最后，我们整合了所有代码并进行了测试。你现在已经知道如何删除表格中的所有行了，希望本文对你有所帮助！