Reputation: 6512
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
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
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
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
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