javascript - Jquery:空のテーブル行を非表示にする

Question

tdテーブルが空であるかどうか、およびそれらが親を非表示にしているかどうかを検出するスクリプトを作成しようとしていますtr

スタック オーバーフローを検索して他のスクリプトを見つけましたが、どれもうまくいかないようです。

これまでのところ、私は持っています:

$(".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

空白のコンテンツのみを含む行を非表示にしたいようです（ただし、セルには他の要素の子ノードがある場合があります）。プレーン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 4

.html()最初に一致した要素のコンテンツのみを返すため、行に複数のセルがある場合、これは機能しません。.text()セルに画像やその他の空のタグがない限り、より良い修正かもしれません。

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

デモ

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

});