jQuery删除除第一个以外的所有表行


280

使用jQuery,如何删除表中除第一行外的所有行?这是我第一次尝试使用索引选择器。如果我正确地理解了示例,那么以下方法应该起作用:

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

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

我缺少什么,该如何解决?当然,我可以使用简单的javascript,但是我对jQuery有很多乐趣,因此我想使用jQuery来解决。


有人知道为什么给定的代码不起作用吗?将过滤器选择器置于删除功能时,我也遇到问题
Leto

1
既然我对此有了更好的了解,上面的代码将无法正常工作,因为$(某些表选择器)仅选择表元素,而不选择其任何子元素,因此没有'tr'元素供remove函数查找。使用find函数在table元素的子元素之间搜索匹配项。
肯保罗

Answers:


520

这应该工作:

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

2
如果我要除去第一和第二位以外的表行怎么办?

18
@ user594166使用gt(1)代替gt(0)。
christianvuerings

6
从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();
Chris_F '16

您的代码对我不起作用..我将gt(0)更改为gt(1),这可行。
saadk

112

考虑到意图,我认为这更具可读性:

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

使用子项还可以通过限制搜索深度来解决第一行包含表的情况。

如果您有TBODY元素,则可以执行以下操作:

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

如果您有THEAD或TFOOT元素,则需要做一些不同的事情。


2
$('someTableSelector > tbody:last > tr:not(:first)').remove();
回复

要删除所有孩子,我必须使用双引号。否则无法识别。$("#tasks").children().remove();
Doomsknight

39

完成此操作的另一种方法是将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元素保留在标题应位于的位置。当您只想刷新表的内容时,它很有用。


3
在所有提供的解决方案中,这可能将具有最佳性能,并且非常优雅。
the.jxc

37

如果是我,我可能会把它简化为一个选择器:

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

同意,但更具体地说,它必须说:$('someTableSelector tbody tr:not(:first)')。remove();
MarcoMuciño2014年

29

您的选择器不需要位于您的移除对象之内。

它看起来应该像这样:

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

这意味着选择表ID为tableID的第一行以外的所有行,并将其从DOM中删除。


我同意。在我的情况下,表对象是先前选择的。
肯·保罗

删除除第一个行外的所有行:-$(“#tableID tr:gt(1)”)。remove();
Biki

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

我记得遇到“切片”的速度比所有其他方法都要快,因此只需将其放在此处即可。


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

gt不推荐使用,这是最好的答案。
Cyber​​Ed

6

考虑一个具有id的表tbl:jQuery代码为:

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

2

要删除除第一行(标头除外)以外的所有行,请使用以下代码:

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


1

最简单的方法:

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

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


0

-很抱歉,这是很晚的回复。

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

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

其余的很容易。



0

包装功能:

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

然后调用它:

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

0

这完美地工作

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

是的,之前已经发布过多次。有什么新事吗?
Nico Haase

0

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

$("#compositeTable").find("tr:gt(1)").remove();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.