Hide row if it contains empty columns

问题

I have a table with a couple of rows, each row with two columns, the first column will hold title and second column will have the respective values.sometimes, cells in the right may not have values, so it doesn't make sense to have just the title..with no value.. I can either hide the title on the left cell that has no value on the right or the whole row itself.

I have come up with this but its not working..

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

Here is the table. I am wondering if tag is making any difference. OR one of the has a class and the other one don't ..should that be causing it to not work?

<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>

So there is no parking notes info, so I want to hide the left cell that contains the title 'Parking Notes".

回答1:

I think this will work:

$('.EventDetail tr').has('td:nth-child(2):empty').hide()

You can try it on jsFiddle.

回答2:

Try this:

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

回答3:

Your selector will cause the if statement never to be true for any row in your example. $("td:not(:empty)") always selects the <td> element with the title, so length is always 1. if(!1) is never true.

You should remove the double negative (the ! and the :not) to make it clearer, and then check that the length (i.e. number of matched elements) is > 0.

回答4:

You can try this:

    $(document).ready(function(){
    $('.EventDetail tr').each(function(){      
        if ( $(this).children().not('.TableFields').text().length == 0 )
            $(this).hide();
    }); 
});

来源：https://stackoverflow.com/questions/8978812/hide-row-if-it-contains-empty-columns

标签

javascript

jquery

html-table

row

cell