如何隐藏包含空单元格的行

Question

对于下面的表，row2 (tr class="row2")下的所有单元格都是空的，如何检查空单元格的行，只隐藏(display: none)它?

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

Answer 1

使用下面的jQuery脚本，您将遍历所有表行，检查它们的所有列，并查看其中是否有非空的。

如果它们都不为空，则将隐藏行。

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

更新感谢Tom Hubbard

使用jsfiddle: http://jsfiddle.net/dYkLg/2/

Answer 2

至少有两种方法。

首先，如果所有<td>元素都是空的，那么<tr>元素的内部文本将只由空白组成，因此您可以使用$.trim()和filter()并写入:

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

您还可以使用:not()，:has()和:empty选择器来显式匹配仅包含空<td>元素的<tr>元素:

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

Answer 3

通过这种方式可以隐藏row2

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

Answer 4

如果你使用的类只是用jQuery导航，不修改它们的高度，试试这个:

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

Answer 5

首先，我会给你的表一个id(即:"mytable")

那么你只需要做:

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

希望我帮到你。一般来说:empty选择器将返回内部没有任何内容的元素(即没有子元素和内容)。

对

Answer 6

类似于(即对于每一行，如果有0个非空td，则隐藏它):

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

Answer 7

您可以使用:empty选择器来检查空值

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

这里是工作小提琴http://jsfiddle.net/JujHv/1/

Answer 8

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

Answer 9

修改为检查没有文本的单元格，因为我们的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();
        });