Dennis Martinez
Dennis Martinez

Reputation: 6512

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!

Upvotes: 0

Views: 7192

Answers (4)

Bojangles
Bojangles

Reputation: 101473

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

Upvotes: 1

MacMac
MacMac

Reputation: 35301

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

Upvotes: 0

roberkules
roberkules

Reputation: 6605

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)

Upvotes: 2

Shef
Shef

Reputation: 45589

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

Upvotes: 0

Related Questions