Anju Thapa Anju Thapa - 2 years ago 62
jQuery Question

Hide table row if one of its columns is empty using CSS


Possible Duplicate:

hide row if it contains empty columns




Can the row containing empty cell in this table be hidden using CSS.. I have tried jQuery and its not working right now..
this is what I used and it doesn't do anything!

$('.EventDetail tr').each(function(){
if ($('td:empty',this).length > 0))
$(this).hide();
});


There ain't nothing wrong with this piece of jQuery, is there? I would like to see if we can do
display:none
for the selected row? Is it something achievable using CSS?

<table cellpadding="10" class ="EventDetail">
<tr>
<td class="TableFields"><em>Who Should Enroll?:</em></td>
<td>Everyone 18 and older who would like to attend</td>
</tr>
<tr>
<td class="TableFields"><em>Handicapped Access:</em></td>
<td>Yes</td>
</tr>
<tr>
<td class="TableFields"><em>Parking Notes:</em></td>
<td></td>
</tr>
<tr>
<td class="TableFields"><em>Instructor:</em></td>
<td>John Filler</td>
</tr>
</table>

Answer Source

This selector should do it...

$('.EventDetail tr:has(td:empty)').hide();

jsFiddle.

The :empty selector looks for elements with no child nodes. If it is possible you may have whitespace there, but you still consider it empty, try something such as...

$('.EventDetail tr').filter(function() {
    return $(this).find('td').filter(function() {
      return ! $.trim($(this).text());  
    }).length;
}).hide();

jsFiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download