javascript - Jquery：隐藏空表行

Question

我正在尝试编写一个脚本来检测表tds 是否为空以及它们是否隐藏父级tr

我搜索了 Stack Overflow 并找到了其他脚本，但似乎没有一个对我有用。

到目前为止，我有：

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

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

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

    });

但就是不能让它工作。任何意见，将不胜感激！

小提琴：http: //jsfiddle.net/MeltingDog/S8CUa/1/

Answer 1

试试这个 -

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

演示

Answer 2

你应该试试这个。

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

Answer 3

.html()只返回第一个匹配元素的内容，所以如果你的行有多个单元格，这将不起作用。.text()可能是一个更好的解决方法，除非您在单元格中有图像或其他空标签。

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

演示

Answer 4

您似乎想隐藏仅包含空白内容的行（但单元格可能具有其他元素子节点）。使用纯 JavaScript：

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

帮手：

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

Answer 5

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

});

Answer 6

隐藏表，如果表没有使用 jquery 的行

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