jQuery删除除第一行之外的所有表行

Posted 2023-03-05

【中文标题】jQuery删除除第一行之外的所有表行

【英文标题】：jQuery delete all table rows except first

【发布时间】：2010-09-27 01:37:54

【问题描述】：

使用 jQuery，如何删除表中除第一行之外的所有行？这是我第一次尝试使用索引选择器。如果我正确理解了这些示例，则以下内容应该有效：

$(some table selector).remove("tr:gt(0)");

我将其读作“在 jQuery 对象中包装一些表，然后删除这些行的元素索引大于零的所有 'tr' 元素（行）”。实际上，它执行时不会产生错误，但不会从表中删除任何行。

我缺少什么，我该如何解决？当然，我可以直接使用 javascript，但是我对 jQuery 非常感兴趣，所以我想使用 jQuery 来解决这个问题。

【问题讨论】：

任何人都知道为什么给定的代码不起作用？将过滤器选择器放入删除功能时我也遇到问题

现在我对这一点有了更好的理解，上面的代码不起作用，因为 $(some table selector) 只选择 table 元素，而不选择它的任何子元素，所以没有 'tr' 元素要查找的删除功能。使用 find 函数在表格元素的子元素中搜索匹配项。

看这个答案***.com/questions/4831334/…

【参考方案1】：

这应该有效：

$(document).ready(function() 
   $("someTableSelector").find("tr:gt(0)").remove();
);

【讨论】：

如果我想删除除 first 和 seconde 之外的表行怎么办？

@user594166 使用 gt(1) 而不是 gt(0)。

来自 jQuery 网站：Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead. 我建议使用 $("#mytable > tr").slice(1).remove();

您的代码对我不起作用..我将 gt(0) 更改为 gt(1) 并且这有效。

【参考方案2】：

考虑到意图，我认为这更具可读性：

$('someTableSelector').children( 'tr:not(:first)' ).remove();

通过限制搜索的深度，使用子元素还可以处理第一行包含表格的情况。

如果你有一个 TBODY 元素，你可以这样做：

$("someTableSelector > tbody:last").children().remove();

如果你有 THEAD 或 TFOOT 元素，你需要做一些不同的事情。

【讨论】：

re: 做点不一样的事.... 这行得通：$('someTableSelector > tbody:last > tr:not(:first)').remove();

要删除所有孩子，我必须使用双引号。不然没认出来。 $("#tasks").children().remove();

【参考方案3】：

实现此目的的另一种方法是使用 jQuery 的 empty() 函数和表中的 thead 和 tbody 元素。

表格示例：

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

还有 jQuery 命令：

$("#tableId > tbody").empty();

这将删除表格的 tbody 元素中包含的每一行，并将 thead 元素保留在标题应位于的位置。当您只想刷新表格的内容时，它会很有用。

【讨论】：

这可能是所有提供的解决方案中性能最好的，而且非常优雅。

【参考方案4】：

如果是我，我可能会把它归结为一个选择器：

$('someTableSelector tr:not(:first)').remove();

【讨论】：

同意，但更具体的必须说：$('someTableSelector tbody tr:not(:first)').remove();

【参考方案5】：

您的选择器不需要在您的移除中。

它应该看起来像：

$("#tableID tr:gt(0)").remove();

这意味着选择表中 ID 为 tableID 的除第一行之外的每一行，并将它们从 DOM 中删除。

【讨论】：

我同意。在我的例子中，表格对象之前已被选中。

删除除第一行以外的所有行：- $("#tableID tr:gt(1)").remove();

【参考方案6】：

$('#table tr').slice(1).remove();

我记得遇到“切片”比所有其他方法都快，所以就把它放在这里。

【讨论】：

有些对我不起作用。接受的答案似乎可以解决问题。

gt 已弃用，这是最好的答案。

【参考方案7】：

考虑一个 ID 为 tbl 的表：jQuery 代码将是：

$('#tbl tr:not(:first)').remove();

【参考方案8】：

要删除除第一行以外的所有行（标题除外），请使用以下代码：

$("#dataTable tr:gt(1)").remove();

【参考方案9】：

最简单的方法：

$("#mytable").find($("tr")).slice(1).remove()

-首先引用表格 -获取元素列表并对其进行切片并删除列表中的选定元素

【参考方案10】：

-抱歉，回复太晚了。

我发现删除任何行（以及通过迭代的所有其他行）的最简单方法是这样

$('#rowid','#tableid').remove();

剩下的很简单。

【参考方案11】：

$("#p-items").find('tr.row-items').remove();

【参考方案12】：

封装在一个函数中：

function remove_rows(tablename)  
    $(tablename).find("tr:gt(0)").remove();        

然后调用它：

remove_rows('#table1');
remove_rows('#table2');

【参考方案13】：

这很好用

$("#myTable tbody").children( 'tr:not(:first)' ).html("");

【讨论】：

是的，之前已经发布过多次了。有什么新鲜事吗？

【参考方案14】：

这在我的情况下以下列方式工作并且工作正常

$("#compositeTable").find("tr:gt(1)").remove();