Question

对于下表，第2行（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/

实际上这是一个较短的版本，这是通过~~检查空colums的数量是否等于该行中colums的总量~~直接检查是否有任何非空colums当前行：

$('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选择器显式匹配仅包含空<tr>元素的<td>元素：

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

类似的东西（例如，对于每一行，如果有非空的td，那么隐藏它）：

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

Answer 6

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

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

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

Answer 7

首先，我会给你的表一个id（即“mytable”）

然后你只需要这样做：

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

希望我能帮到你。通常，：empty选择器将返回内部没有任何内容的元素（即没有子元素，也没有内容）。

此致

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

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

9 个答案: