Question

I am trying to write a script that detects if a tables tds are empty and if they are hide the parent tr

I’ve searched Stack Overflow and found other scripts but none seem to work for me.

So far I have:

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

    var cell = $(this).find('td').html();       

    if (cell == null){
    console.log('empty');
    $(this).parent().addClass('nodisplay');
    }

    });

but just can’t get it working. Any advice would be appreciated!

Fiddle: http://jsfiddle.net/MeltingDog/S8CUa/1/

Answer 1

.html() only returns the content of the first matched element, so if your rows have more than one cell this wouldn’t work. .text() might be a better fix, unless you have images or other empty tags in the cells.

$("table tr").each(function() {        
    var cell = $.trim($(this).find('td').text());
    if (cell.length == 0){
        console.log('empty');
        $(this).addClass('nodisplay');
    }                   
});

DEMO