Question

我有一个包含动态生成的'n'行的表。所有<td>可能包含也可能不包含数据。我想隐藏或删除“<tr>”，如果它的所有内容都是空的。

我不知道如何解析所有<td>并确保它是空的。

示例表如下，

<table id='ex_table'>
  <tr>
     <td>one</td>
     <td>two</td>
  </tr>
  <tr>
     <td></td>
     <td>one</td>
  </tr>
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

在上表中，最后一行需要隐藏，因为它的所有<td>都是空的。我更喜欢jquery这样做。

Answer 1

您实际上不必检查td元素。您可以选择行并使用.filter过滤掉那些包含文字内容的行，即只保留那些为空的行：

$('#ex_table tr').filter(function() {
    return $.trim($(this).text()) === '';
}).hide(); // or .remove()

这是有效的，因为.text获取了所有后代的组合内部文本，而$.trim删除了由于HTML格式化而导致的空白字符（但实际上并不是内容）

如果您的单元格包含HTML元素但没有文本内容（例如通过CSS设置的图标），并且您希望保留这些单元格，那么您实际上必须测试单元格是否包含HTML。该方法与测试文本内容基本相同

$('#ex_table tr').filter(function() {
    return $(this).children().filter(function() {
        return $.trim($(this).html()) !== '';
    }).length === 0;
}).hide();

这次我们只统计包含HTML的行中的单元格数。如果没有，则该行被视为空。

Answer 2

尝试这样的事情

$(function(){
    $('#ex_table tr').each(function(){
        var val = $(this).text().trim();
        if(val == ''){
            $(this).remove();
        }
    })
})

Answer 3

试试这个：

$('#ex_table tr').each(function){
  if($(this).text()==''){
    $(this).remove();
  }
}

Answer 4

你说的直接jQuery？

编辑：我会使用Felix的答案..只需将“.hide（）”更改为“.remove（）”，如果您要删除该元素。

$('tr').each(function(){
  var hasValue = false;
  $(this).children().each(function(){
     if ($(this).html() != "")
        hasValue = true;
  });
if (!hasValue)
    $(this).remove();
});

Answer 5

试试此代码

var hide;
$("tbody").find("tr").each(function(){
    hide=true;
    $(this).find("td").each(function(){
        if($(this).html()!='') {
            hide=false;
        }
    });
    if(hide==true) {
        $(this).hide();
    }
});

如果它是空的，如何制作隐形？

5 个答案: