如果<t>的<tr>是空的,如何使<tr>不可见？

Question

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

我不知道如何解析所有<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的单元格数量.如果没有,则该行被视为空.