How do I hide all table rows with the same id usin

Question

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!

Answer 1

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)

Answer 2

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();

Answer 3

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();

Answer 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();