如何使用jQuery从表格中删除除第一个以外的所有<tr>元素

Question

我有一张表格，想要删除除第一项以外的所有标签。如何实现这个功能？

- kbvishnu

---

第一行是否语义上是标题？如果是，可能最好稍微更改您的标记，这将导致更简单的脚本。 - Sapph

Answer 1

这里有几种方法，其中最简洁的方法是使用:gt()选择器，像这样：

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

- Nick Craver

Answer 2

第一行有特殊的含义吗？我要冒险猜测第一行很可能是包含列标题的行。

如果是这样，一个简单的选择是将第一行放在一个<thead>中，将所有正文行放在一个<tbody>中。然后你只需执行：

$('#myTable tbody tr').remove();

这也使你的HTML具有更多的语义意义。

- Crast

Answer 3

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

这里使用了一个完全有效的CSS选择器来获取所有的表格行，然后对集合进行 .slice() 操作，从索引 1（第二行）开始，最后调用 .remove() 来删除这些行。

有效的CSS选择器非常重要，因为它将允许jQuery/Sizzle成功地利用本地的 querySelectorAll 方法，这将提供极快的选择速度。 querySelectorAll 在许多浏览器中都得到支持，包括 IE8。

---

编辑： 虽然您要求使用jQuery解决方案，但我想提供一种原生DOM API解决方案，因为它比任何其他方法都要快，并且非常简单。

var rows = document.getElementById('theTable').rows;

while( rows[1] )
    rows[1].parentNode.removeChild( rows[1] );

- user113716

---

我正在测试你的说法，你是正确的，但后来的浏览器似乎更喜欢新的CSS3选择器 =) - Couto

@Couto：说得好。'table :first-child ~ tr' 在大多数情况下（也许是全部情况）都是有效的选择器，尽管如果有多个<tbody>元素，则技术上可能无法满足要求。如果:gt()或 :not(:first) 是有效的选择器就太好了。 - user113716

Answer 4

我想我会跟上潮流并提供一些解决方案：

如果您正在使用 thead 作为第一行，请将 tr 放在 tbody 中：

$('#myTable tbody tr').remove();

如果您没有使用thead，那么可以通过多种方式获取其后续行。我强烈建议查看jQuery api以获得帮助。

以下是一些删除行的示例：

1. $('#myTable tr + tr').remove();
2. $('#myTable tr:gt(0)').remove();
3. $('#myTable tr:not(:first-child)').remove();
4. $('#myTable').find('tr').not(':first-child').remove();
5. $('#myTable tr:first-child').siblings().remove();

实际上，这取决于您在选择器中想要创造多少创意以及您的意图。我没有提供过滤器示例，但是使用filter将允许您调用end并从父元素继续链接。

您将需要进行一些单元测试以确定哪种方法最快，如果不重要则不需要进行测试。

- zzzzBov

---

那些都是不错的、有创意的解决方案，不过如果有多个<tbody>标签的话，1、3、4和5就不能提供所需的结果。虽然我承认这种情况不太可能发生。 - user113716

@patrick dw 我想这是对的，但如果他们正在使用多个'tbody'，他们可能正在使用'thead'，这种情况下第一个示例是最好的选择。不过，你发现得很好。 - zzzzBov

Answer 5

$('#myTable').find('tr').not(":first").remove();

例子：

http://jsfiddle.net/TwqN3/

- Stefan Kendall

---

另一篇SO帖子提供了一种替代方法：$('#someTableSelector tr:not(:first)').remove(); - gloomy.penguin

Answer 6

使用下一个兄弟选择器：

$('table :first-child ~ tr').remove();

例如： http://jsfiddle.net/TwqN3/2/ （感谢Stefan Kendall！我不知道jsfiddle。）

- fjsj