How do I hide all table rows with the same id using jQuery or Javascript?

问题

I have a table with rows that have the of custom attribute with each other. I want to hide all the table rows except for the parent row using jQuery (or Javascript). How can I go by doing this?

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

Edit: Wow big typo on my part, I am terribly sorry, I meant custom attribute. Updated!

回答1:

With your new example, it's possible using jQuery's atribute equals selector (here). Take a look at this tasty fiddle.

Basically, in your selector, you need this:

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

Of course, this is customisable. The important bit is tr[group='2']

EDIT

This updated fiddle should work. If someone can post a better way, please do.

It adds to the above line with this:

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

回答2:

they can't have the same ID, the ID tag must be unique

you could simply use: $("table tr:gt(0)").hide()
(this only works if you don't have nested tables)

回答3:

You can't have same id used twice on two HTML elements. Furthermore, you can't start an id with a number.

If you can change your HTML markup to use classes, which would look like this:

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

Then, you would do it like this:

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

回答4:

You should not use IDs, only use classes when an element is repeated on the page, since ID refers to be unique, which can only be used once per page. Replace the id attribute to class and then you can use this code:

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

来源：https://stackoverflow.com/questions/6379250/how-do-i-hide-all-table-rows-with-the-same-id-using-jquery-or-javascript

标签

javascript

jquery

html-table

row