How to hide a row that containing empty cell

For the table below, all cell under row2 (tr class="row2") is empty, how to check the row with empty 开发者_运维问答cell and only hide (display: none) it?

<table>
<tr class="row1">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr class="row2">
<td></td>
<td></td>
<td></td>
</tr>
...
<tr class="row100">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

With the following jQuery script you will loop through all table rows, check all their colums and see if any of them is not empty.

If none of them is not empty it will hide the row.

$('table tr').each(function(){

    var hide = true;
    $('td',this).each(function(){

        if($(this).html() != '')
            hide = false;

    });

    if(hide)
        $(this).hide();

});

Excuse me, it's supposed to be .html() not .val()

Here is a jsfiddle example: http://jsfiddle.net/dYkLg/

Here is a shorter version actually, this works by checking if the amount of empty colums is equal to the total amount of colums within that row directly checking if there are any non-empty colums in the current row:

$('table tr').each(function(){

    if(!$('td:not(:empty)',this).length)
        $(this).hide();

});

Updated thanks to Tom Hubbard

With the jsfiddle: http://jsfiddle.net/dYkLg/2/

There are at least two ways to do this.

First, if all the <td> elements are empty, then the inner text of the <tr> element will only consist of whitespace, so you can use $.trim() with filter() and write:

$("tr").filter(function() {
    return $.trim($(this).text()) == "";
}).hide();

You can also use the :not(), :has() and :empty selectors to explicitly match the <tr> elements that only contain empty <td> elements:

$("tr").not(":has(td:not(:empty))").hide();

In this way you can hide the row2

$('.row2').hide();

If you use classes just to navigate with jQuery and don't modify their heights try this:

$("tr").each(function(index)
{
    if ($(this).height() == 0)
        $(this).hide();
});

First of all I would give your table an id (i.e. "mytable")

Then you just need to do:

$("#mytable td:empty").hide();

Hope I helped. In general the :empty selector will return elements that do not have anything at all inside them (i.e. no children and no contents).

Regards

Something like (i.e. for each row if there is are zero non-empty td's then hide it):

$("tr").each(function (){  
         var JsThis = $(this);
         if($("td:not(:empty)",JsThis).size() === 0){
             JsThis.hide();
         }
       });

you can use the :empty selector to check the empty values

$("tr td:empty").hide();

here is the working fiddle http://jsfiddle.net/JujHv/1/

http://jsfiddle.net/hMb2q/

$('table tr').each(function(){

    var tr = $(this);
    var tdNumber = tr.find('td').length;
    var counter = 0;

    tr.find('td').each(function () {
        if ( $(this).html() == '' ) counter++;
    });

    if ( counter == tdNumber ) tr.remove();
});

Modified to check for a cell with no text, as our CMS outputs empty p tags for cells with no content.

  $('table tr').each(function(){
            var tr = $(this);
            var tdNumber = tr.find('td').length;
            var counter = 0;

            tr.find('td').each(function () {
                if ($(this).text().trim() == "") counter++;
            });

            if ( counter == tdNumber ) tr.remove();
        });