如何使用 jQuery 或 Javascript 隐藏具有相同 ID 的所有表行？答案

【问题标题】：How do I hide all table rows with the same id using jQuery or Javascript?如何使用 jQuery 或 Javascript 隐藏具有相同 ID 的所有表行？
【发布时间】：2011-09-16 18:43:03
【问题描述】：

我有一个表，其中的行彼此具有自定义属性。我想使用 jQuery（或 Javascript）隐藏除父行之外的所有表行。我该怎么做？

<table>
<tr group="1">Parent</tr>
<tr group="1">Child</tr>
<tr group="1">Child</tr>
<tr group="1">Child</tr>
</table>

编辑：哇，我的错字很大，非常抱歉，我的意思是自定义属性。更新了！

【问题讨论】：

实际上，具有相同ID的多个元素的HTML是无效的。因此，您的代码无效。
您的 HTML 仍然无效。 TR 元素没有组属性，也不能有文本作为 chlid 节点，它们必须有 TH 或 TD。

标签： javascript jquery html-table row

【解决方案1】：

对于您的新示例，可以使用 jQuery 的 atribute equals 选择器 (here)。看看this tasty fiddle。

基本上，在你的选择器中，你需要这个：

$("table tr[group='2']").hide()

当然，这是可定制的。重要的是tr[group='2']

编辑

This updated fiddle 应该可以工作。如果有人可以发布更好的方法，请这样做。

它在上面的行中添加了这个：

$("table tr[group='2']").filter(":not(:first)").hide();

【讨论】：

这就是我目前所拥有的，但我需要隐藏除父行之外的所有内容。
没问题 :-) 很高兴我能提供帮助。

【解决方案2】：

你不应该使用 ID，只在页面上重复元素时使用类，因为 ID 是指唯一的，每个页面只能使用一次。将id属性替换为class就可以使用这个代码了：

$('table tr[group=1]').hide();

【讨论】：

【解决方案3】：

他们不能有相同的ID，ID标签必须是唯一的

你可以简单地使用：$("table tr:gt(0)").hide()
（这仅在您没有嵌套表时才有效）

【讨论】：

【解决方案4】：

您不能在两个 HTML 元素上使用两次相同的 id。此外，您不能以数字开头。

如果您可以将 HTML 标记更改为使用类，则如下所示：

<table>
    <tr class="one">Parent</tr>
    <tr class="one">Child</tr>
    <tr class="one">Child</tr>
    <tr class="one">Child</tr>
</table>

然后，你会这样做：

$('.one').hide();

【讨论】：