1

我有一个包含多个条目的表。在每个条目表行之后是一个编辑表行，其中包含一个跨列的单元格，其内部是一个动态加载 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();
    }
});
4

2 回答 2

2

  • div不是孩子，是孙子，因此找不到children()s div。使用上下文或find代替。

  • 您正在操作DOM 元素，hide而show不是 jQuery 元素。您需要先将其包装在 jQuery 中。

因此，每次加载某些内容时都运行此代码：

//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

于 2013-05-15T07:35:26.180 回答
0

您应该使用$(this)而不是this.

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

于 2013-05-15T07:34:13.070 回答