CODEWITHSUNDEEP
jquery
TheBoubou
TheBoubou

Reputation: 19903

Hide row ... from column

I have this

<table>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="Data">...</td>
</tr>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="noData">...</td>
</tr>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="noData">...</td>
</tr>
</table>

with jQuery, when a row (tr) has a column (td) with class "noData", I'd like hide the complete row the result on this table will be

<table>
<tr>
    <td>...</td>
    <td>...</td>
    <td class="Data">...</td>
</tr>
</table>

Thanks,

Upvotes: 1

Views: 132

Answers (3)

jpsimons
jpsimons

Reputation: 28090

While sarfraz's solution works, I think this code makes a closer analog to the problem description, which is a good thing for readability and later understanding.

$("tr:has(>td.noData)").hide();

Upvotes: 2

fyjham
fyjham

Reputation: 7034

To get a list of the tr's that contain TD's with no data simply call:

$("tr:has(> td.noData)")

Once you have that it's trivial to hide it (just add a .hide() to the end).

The relevant selectors are the Has selector and the parent>child selector.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382696

You may try below code:

$(document).ready(function()
{
    $("td.noData").parent().hide("fast");
});

Or you may want to use remove() instead of hide() above or even below code:

$(document).ready(function()
{
    $("td.noData").parent().css('display':'none');
});

Upvotes: 4

Related Questions