jquery 删除表格中除标题行以外的所有行

oyxsuwqo 于 2022-12-18 发布在 jQuery

关注(0)|答案(5)|浏览(180)

使用Javascript（带JQuery），我想删除表中除标题行之外的所有行。
这看起来很简单，因为我在StackOverFlow上看到了很多关于这个问题的帖子，也看到了很多解决方案。但是，似乎没有一个对我有效。请参考下面的代码：

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <th>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </th>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

有人知道我做错了什么吗？谢谢。

卡尔西克

jquery

来源：https://stackoverflow.com/questions/62764334/delete-all-rows-in-table-except-the-header-row

5条答案

按热度按时间

trnvg8h31#

只需将您的th更新到head，您就可以开始了，请参见以下内容：
超文本：

<!DOCTYPE html>
<html lang="en">
<head>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

  
</head>
<body onLoad="delTable()">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

联森：

function delTable() {
  console.log("Delete all rows, but the header");

  // Option-A
  // $('#TableA tbody tr').remove();

  // Option-B
  // Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
  // $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();

  // Option-C
  $('#TableA tbody').empty();

}

工作小提琴：https://jsfiddle.net/pvfkxdby/1/

赞(0）回复(0）举报 2022-12-18

8aqjt8rx2#

您需要将th替换为thead，并按如下方式使用$('#TableA tbody').find("tr")：

function delTable() {
  console.log("Delete all rows, but the header");
  $('#TableA tbody').find("tr").remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body onLoad="delTable();">
  <table id="TableA">
    <thead>
      <tr>
        <td>Col A</td>
        <td>Col B</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

赞(0）回复(0）举报 2022-12-18

8ehkhllq3#

这对我很有效。你用<th>代替<thead>来分隔你的头文件，然后你在你的头文件中有<td>代替<th>。

$(document).ready(() => {
  $("#delete").click(() => {
    $("#TableA tbody tr").remove()
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
    <thead>
      <tr>
        <th>Col A</th>
        <th>Col B</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
 </table>
 <button id="delete">delete</button>

赞(0）回复(0）举报 2022-12-18

ny6fqffe4#

通过检查我的谷歌浏览器中的HTML，我可以看到行被重新排列，甚至第一行都在<tbody>标签内。因此整个表格被删除。您可以通过将第一行 Package 在<thead>标签中或使用不使用<tbody>标签的不同方法来修复此问题。

赞(0）回复(0）举报 2022-12-18

izj3ouym5#

这将是一个简单的一行程序：

function delTable() {
  console.log("Delete all rows, but the header");

  $('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row
}

给定代码的作用是使用以下命令标识表'TableA'中不是第一行的行：$（'#TableA'）.find（“tr：not（：first）”），然后使用.remove（）命令删除行。

赞(0）回复(0）举报 2022-12-18

我来回答

jquery 删除表格中除标题行以外的所有行

5条答案

相关问题

热门标签

最新问答