CODEWITHSUNDEEP
jqueryhtml-table
Charles Yeung
Charles Yeung

Reputation: 38825

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>

Upvotes: 5

Views: 9920

Answers (9)

slatronica
slatronica

Reputation: 1

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();
        });

Upvotes: 0

Kokos
Kokos

Reputation: 9121

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/

Upvotes: 6

Rafay
Rafay

Reputation: 31043

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/

Upvotes: 2

Arsen Kazydub
Arsen Kazydub

Reputation: 5660

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();
});

Upvotes: 1

Tom Hubbard
Tom Hubbard

Reputation: 16139

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();
         }
       });

Upvotes: 2

Xeroxoid
Xeroxoid

Reputation: 2155

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

Upvotes: 2

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263157

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();

Upvotes: 6

Igor Dymov
Igor Dymov

Reputation: 16480

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();
});

Upvotes: 2

Mr.T.K
Mr.T.K

Reputation: 2356

In this way you can hide the row2

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

Upvotes: 2

Related Questions