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

【问题标题】：How to hide a row that containing empty cell如何隐藏包含空单元格的行
【发布时间】：2018-10-24 21:25:18
【问题描述】：

对于下表，第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>

【问题讨论】：

标签： jquery html-table

【解决方案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();

});

感谢汤姆哈伯德更新

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

【讨论】：

如果您使用 :not() 选择器，您可以将大小与 0 进行比较并避免额外的选择。

【解决方案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();

【讨论】：

你的第二个方案很优雅，我会记住的。

【解决方案3】：

这样可以隐藏row2

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

【讨论】：

对不起，请检查我更新的问题“...检查带有空单元格的行并且只隐藏（显示：无）它...”

【解决方案4】：

如果你使用类只是为了通过 jQuery 进行导航并且不修改它们的高度，试试这个：

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

【讨论】：

【解决方案5】：

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

那么你只需要这样做：

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

希望我能帮上忙。通常 :empty 选择器将返回其中没有任何内容的元素（即没有子元素和内容）。

问候

【讨论】：

【解决方案6】：

类似的东西（即对于每一行，如果有零个非空 td 则隐藏它）：

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

这里你不需要each()，你可以在选择器结果上调用hide()。例如：jsfiddle.net/jackfranklin/XbvPV

【解决方案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();
});

【讨论】：

【解决方案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();
        });

【讨论】：