jquery - 如果所有 td 为空，则隐藏表格行

Question

有没有一种简单的方法可以在没有每个循环的情况下做到这一点。

我想隐藏整个<tr>，但前提是它的所有<td>s 都是空白的。该表是动态生成的，因此空白行可以在任何位置。

$('#table1 tr:has(td):empty').remove();

HTML

<table id="table1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
...
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

Answer 1

我建议，尽管这仍然隐含地检查每个tr元素：

$('tr').filter(
    function(){
        return $(this).find('td').length == $(this).find('td:empty').length;
    }).hide();

JS 小提琴演示。

在 CSS 中，使用和伪选择器，这是有一些跨浏览器的困难的：:not():empty

tr td:empty {
    visibility: hidden;
    height: 0;
}

​td:not(:empty) ~ td:empty {
    visibility: visible;
    height: 100%;
}​

JS 小提琴演示。

参考：

• jQuery：
  • :empty(jQuery) 选择器。
  • filter().
  • find().
• CSS：
  • :empty.
  • 一般兄弟~组合子。
  • :not().

Answer 2

如果你想使用每个，你可以这样做：

$('#table1 tr').each(function() {
    if ($(this).find('td:empty').length) $(this).remove();
});​

jsFiddle 示例