CODEWITHSUNDEEP
jquerytablerow
BjornBogers
BjornBogers

Reputation: 108

JQuery hide <tr> based on <td> id

I would like to hide some table row from my table based on the table data id, I've only found ways to hide the table row based on the table data value but that is (in my case) not the solution.

For example, lets say this is my table:

<table id='table1' border="1">
<tr id='hideme'>
<td id='letmehide'>row 1, cell 1</td>
<td id='letmehide'>row 1, cell 2</td>
</tr>
<tr id='donthideme'>
<td id='dontletmehide'>row 2, cell 1</td>
<td id='dontletmehide'>row 2, cell 2</td>
</tr>
</table>

What should my javascript/JQuery look like? Fiddle: http://jsfiddle.net/twyqS/

Upvotes: 6

Views: 45530

Answers (7)

Simon Eric
Simon Eric

Reputation: 1

For others who want to use the same id for multiple tr Try This:

$(this).closest("tr").hide();

Upvotes: -1

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

$(document).ready(function(){
    $('button').on('click', function(){
        $('#table1 tr:first').hide();
    });
});

And see this...

DEMO

Upvotes: 1

Claudio Redi
Claudio Redi

Reputation: 68400

Take into account that ids must be unique on your page so I recommend you to use css classes instead of ids

HTML

<table id='table1' border="1">
<tr class='hideme'>
<td class='letmehide'>row 1, cell 1</td>
<td class='letmehide'>row 1, cell 2</td>
</tr>
<tr class='donthideme'>
<td class='dontletmehide'>row 2, cell 1</td>
<td class='dontletmehide'>row 2, cell 2</td>
</tr>
</table>

JS

$('#table1 .hideme').hide();

This would allow you to hide several rows if necessary.

Upvotes: 9

Dmitry Igoshin
Dmitry Igoshin

Reputation: 81

$("#letmehide").parent().hide();

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

ID of an element should be unique, so use class attribute instead of ID in your elements

Try

<table id='table1' border="1">
    <tr class='hideme'>
        <td class='letmehide'>row 1, cell 1</td>
        <td class='letmehide'>row 1, cell 2</td>
    </tr>
    <tr class='donthideme'>
        <td class='dontletmehide'>row 2, cell 1</td>
        <td class='dontletmehide'>row 2, cell 2</td>
    </tr>
</table>

then

$('#table1 tr:has(td.letmehide)').hide()

Demo: Fiddle

Upvotes: 1

sangram parmar
sangram parmar

Reputation: 8726

Try this:

$('#table1 tr[id="hideme"]').hide();//in table1 hide tr that are with attribute id="hideme"

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

First of all is you're using jQuery, use it to attach your event handlers. It results in much more semantic HTML, and is a better separation of concerns.

With regard to your problem you should use the :first selector to get the first tr element, and then the hide() function:

$('#table1 tr:first').hide();

Alternatively you could use the id of the tr as it is intended to be unique:

$('#hideme').hide();

I would suggest familiarising yourself with the jQuery API, specifically the selectors available.

Upvotes: 2

Related Questions