javascript - Jquery: hiding empty table rows - Stack Overflow

admin管理员组

文章数量:1297008

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

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/MeltingDog/S8CUa/1/

• javascript
• jquery
• html
• html-table
• tablerow

Share Improve this question Follow edited Jul 29, 2017 at 20:30 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 8, 2012 at 5:57 MeltingDogMeltingDog 15.5k5252 gold badges178178 silver badges322322 bronze badges 3

• What is your criterion for "empty"? Is that no text, or no child nodes, or no elements and only whitespace, or nothing at all (e.g. <td></td>)? – RobG Commented Nov 8, 2012 at 6:36
• @RobG nothing at all like your example – MeltingDog Commented Nov 8, 2012 at 6:43
• —so we just guess? My example does exactly what Musa's answer does. – RobG Commented Nov 8, 2012 at 12:16

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Try this -

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

Demo

you should try this.

jQuery(document).ready(function(e) {
    jQuery(jQuery('table tr td:empty').parents('tr')).addClass('nodisplay');
});

.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

It seems you want to hide rows that have only whitespace content (but the cells might have other element child nodes). Using plain javascript:

var rows = document.getElementsByTagName('tr');
var i = rows.length;
while (i--) {
  if ( !trim(getText(rows[i])) ) {
    rows[i].className += ' nodisplay';
  }
} 

Helpers:

function trim(s) {
  return s.replace(/(^\s*)|(\s*$)/g, '');
}

function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  }
} 

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

    var hide = true;

    $('td',this).each(function(){

        if ($.trim($(this).text()) != "")
            hide = false;

    });

    if(hide)
        $(this).closest('tr').hide();
        // OR $(this).closest('tr).addClass('nodisplay');

});

Hide table, if table have no rows using jquery

$('.tblClass').each(function(){
    if($(this).find('.rows').length == 0){
        $(this).hide();
    }
});

本文标签： javascriptJquery hiding empty table rowsStack Overflow