jQuery - 如何隱藏包含空單元格的行

對於下表，row2（tr class =「row2」）下的所有單元格爲空，如何檢查具有空單元格的行並僅隱藏（display：none）它？jQuery - 如何隱藏包含空單元格的行

感謝

<table> 
<tr class="row1"> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
</tr> 
<tr class="row2"> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
... 
<tr class="row100"> 
<td>a</td> 
<td>b</td> 
<td>c</td> 
</tr> 
</table>

來源

2011-07-11 Charles Yeung

用下面的jQuery腳本，你將通過所有的錶行中循環，檢查他們的所有colums，看看其中是否不是空的。

如果它們都不是空的，它將隱藏該行。

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

    var hide = true; 
    $('td',this).each(function(){ 

     if($(this).html() != '') 
      hide = false; 

    }); 

    if(hide) 
     $(this).hide(); 

});

對不起，這應該是.html()不.val()

這裏是一個的jsfiddle例如：http://jsfiddle.net/dYkLg/

下面是一個較短的版本實際上，這個工程由 ~~檢查，如果空柱的側向承載力量等於該行內的柱面總數~~ ，直接檢查當前行是否有非空柱面：

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

    if(!$('td:not(:empty)',this).length) 
     $(this).hide(); 

});

更新感謝湯姆·哈伯德

隨着的jsfiddle：http://jsfiddle.net/dYkLg/2/

來源

2011-07-11 10:41:02 Kokos

如果你使用：不（）選擇你可以比較大小爲0，並避免額外的選擇。 –

你是對的，更新。 – Kokos

這樣可以隱藏2行

$('.row2').hide();

來源

2011-07-11 10:40:10

對不起，請查看我的更新問題「......檢查行空單元格，只有隱藏（顯示：無）吧...」 –

如果您使用類只是使用jQuery導航並不會改變其高度試試這個：

$("tr").each(function(index) 
{ 
    if ($(this).height() == 0) 
     $(this).hide(); 
});

來源

2011-07-11 10:44:06

喜歡的東西（即對於是否有每一行都是零非空TD的則隱藏）：

$("tr").each(function(){ 
     var JsThis = $(this); 
     if($("td:not(:empty)",JsThis).size() === 0){ 
      JsThis.hide(); 
     } 
     });

來源

2011-07-11 10:44:53

jsFiddle of it：http://jsfiddle.net/EmNey/ –

可以使用:empty選擇檢查空值

$("tr td:empty").hide();

這裏是工作提琴http://jsfiddle.net/JujHv/1/

來源

2011-07-11 10:46:16 Rafay

這裏你不需要'each（）'，你可以在選擇器結果上調用'hide（）'。 EG：http://jsfiddle.net/jackfranklin/XbvPV/ –

@傑克富蘭克林tnx指出它更新了答案 – Rafay

至少有兩種方法可以做到這一點。

首先，如果所有的<td>元素是空的，那麼<tr>元素的內部文本將只包含空格的，所以你可以使用$.trim()與filter()寫：

$("tr").filter(function() { 
    return $.trim($(this).text()) == ""; 
}).hide();

您也可以使用:not()，:has()和:empty選擇明確匹配<tr>元素只包含空<td>元素：

$("tr").not(":has(td:not(:empty))").hide();

來源

2011-07-11 10:47:36

你的第二個解決方案非常優雅，我會記住這一點。 – Kokos

首先，我會給你的表一個ID（即「MYTABLE」）

然後你只需要做到：

$("#mytable td:empty").hide();

希望我幫助。通常情況下：空選擇器將返回其內部沒有任何內容的元素（即沒有子元素和內容）。

問候

來源

2011-07-11 10:48:49 Xeroxoid

http://jsfiddle.net/hMb2q/

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

    var tr = $(this); 
    var tdNumber = tr.find('td').length; 
    var counter = 0; 

    tr.find('td').each(function() { 
     if ($(this).html() == '') counter++; 
    }); 

    if (counter == tdNumber) tr.remove(); 
});

來源

2011-07-11 10:57:13 Webars

修改檢查無文本的單元格，因爲我們的CMS輸出空P-標籤沒有內容的單元格。

$('table tr').each(function(){ 
      var tr = $(this); 
      var tdNumber = tr.find('td').length; 
      var counter = 0; 

      tr.find('td').each(function() { 
       if ($(this).text().trim() == "") counter++; 
      }); 

      if (counter == tdNumber) tr.remove(); 
     });

來源

2013-04-19 17:20:03 slatronica

jQuery - 如何隱藏包含空單元格的行

回答

相關問題