Question

我有一个包含多个条目的表。在每个条目表行之后是一个编辑表行，其中包含一个跨越列的单元格，其中是一个动态加载HTML的DIV。问题是，拥有所有这些空表行会导致在呈现页面时出现很多额外的空白。

我知道我无法将HTML直接动态加载到单元格中，因此我在其中加载了一个DIV，我将内容加载到其中。

我希望在其中的子DIV为空时隐藏任何表行，并在信息已动态加载到子DIV时显示该表行。这个动态加载的信息也可以删除，所以我需要再次将它隐藏起来再次隐藏。

<table width="100%">
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr style="display: none;">
      <td colspan="3"><div></div></td>
    </tr>
  </tbody>
</table>



$("tr").each(function() {
    if (this.children().filter(":empty").length) {
        this.hide();
    } else {
        this.show();
    }
});

Answer 1

div不是孩子，而是孙子，因此children()将找不到div。请使用上下文或find代替。
您正在DOM元素上运行hide和show，而不是jQuery元素。你需要先将它包装在jQuery中。

因此，run this code everytime you load something：

//find empty divs and hide it's tr
$("div:empty").closest('tr').hide();

//find non-empty divs and show it's tr
$("div:not(:empty)").closest('tr').show();

看看妈！没有循环！没有each！：d

Answer 2

您应该使用$(this)代替this。

原因是：$(this)是一个JQuery对象，它允许您在其上调用.children()和.filter(":empty")等JQuery方法，而this只是一个Javascript对象。 ..

如果子DIV为空，则显示/隐藏表行

2 个答案: