如何使用jQuery隱藏空html表格單元格？

Question

我需要的是：
html表格5X7。在許多查詢中，填充完整表格的項目少於35個。

在這種情況下，如何使用jQuery（或其他有效方式）動態地「隱藏」空單元格？

謝謝。

Answer 1

編輯 - 改良版

// Grab every row in your table 
$('table#yourTable tr').each(function(){ 
    if($(this).children('td:empty').length === $(this).children('td').length){ 
    $(this).remove(); // or $(this).hide(); 
    } 
}); 

未經測試，但似乎邏輯上的聲音。

// Grab every row in your table 
$('table#yourTable tr').each(function(){ 
    var isEmpty = true; 
    // Process every column 
    $(this).children('td').each(function(){ 
    // If data is present inside of a given column let the row know 
    if($.trim($(this).html()) !== '') { 
     isEmpty = false; 
     // We stop after proving that at least one column in a row has data 
     return false; 
    } 
    }); 
    // If the whole row is empty remove it from the dom 
    if(isEmpty) $(this).remove(); 
}); 

Answer 2

顯然你要調整選擇，以滿足您的特定需求：

$('td').each(function(){ 
    if ($(this).html() == '') { 
    $(this).hide(); 
    } 
}); 

Answer 3

$('td:empty').hide(); 

Answer 4

我投票支持Ballsacian的答案。由於某種原因，

$('table#myTable tr:not(:has(td:not(:empty)))').hide(); 

有一個錯誤。如果你刪除最外層：not（），它會做你期望的，但是完整的表達式會使jQuery崩潰。 :)

Answer 5

如何CSS empty-cells

table { 
    empty-cells: hide; 
}