jQuery - 检查空的TD，如果全部为空，则隐藏父级TR

Question

jQuery - 检查空的TD，如果全部为空，则隐藏父级TR

12

我想检查空的 TD（只限类 a-h），如果所有都为空，则隐藏父 TR。我遇到的问题是，我的空 TD 包含"& nbsp;"。我不知道如何测试它们？

我想检查空的TD（仅限a-h类），如果全部为空，则隐藏其父TR。但我遇到的问题是，我的空TD包含" "。我不确定如何测试它们？

<table>
  <tr>
    <td class="requirementRight">Requirement</td>
    <td class="a">&nbsp;</td>
    <td class="b">&nbsp;</td>
    <td class="c">&nbsp;</td>
    <td class="d">&nbsp;</td>
    <td class="e">&nbsp;</td>
    <td class="f">NOT EMPTY</td>
    <td class="g">&nbsp;</td>
    <td class="h">&nbsp;</td>
  </tr>
  <tr>
    <td class="requirementRight">Requirement</td>
    <td class="a">&nbsp;</td>
    <td class="b">&nbsp;</td>
    <td class="c">&nbsp;</td>
    <td class="d">&nbsp;</td>
    <td class="e">&nbsp;</td>
    <td class="f">&nbsp;</td>
    <td class="g">&nbsp;</td>
    <td class="h">&nbsp;</td>
  </tr>

if ( $('td.a:empty, td.b:empty, td.c:empty, td.d:empty, td.e:empty, td.f:empty, td.g:empty, td.h:empty') ) {
   // hide the parent tr
}

- user1040259

你需要使用A-H类的特定原因吗？ - BrMcMullin

是的，因为我正在基于这些进行其他样式设计。 - user1040259

5个回答

4

首先，我建议给TD添加一个额外的类来区分需要检查内容的TD。下面，我使用了.et（emptyTest）。

以下语法可能略有不妥，但它应该能让您理解：

```html 要检查的内容 ```

$("tr").each(function() {
  var nonEmpty = $(this).find("td.et").filter(function() {
    return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
  });
  if (nonEmpty.length == 0) $(this).hide();
});

- logical Chimp

谢谢，我明白你的意思，但我的第一个TD将始终有文本。我只需要测试a-h。我认为这很容易解决，不是吗？ - user1040259

是的 - 已更新并修复了建议中的问题（我发布后意识到第一个 TD 会有文本）。 - logical Chimp

4

这就是您正在寻找的内容：

$(function(){
    $('tr').each(function(){
        var _hide = true;
        $(this).find('td:not(.requirementRight)').each(function(){
            if($(this).text().trim() != ''){
                _hide = false;
            }
        });

        if(_hide){
            $(this).hide();
        }
    });
})

您需要检查每一行是否存在非空白内容，如果没有，则隐藏该行。

以下是一个示例链接：http://jsfiddle.net/kvCXa/7/

祝您愉快！

- Jen-Ya

你忘记了 <td class="requirementRight">Requirement</td>，所以解决方案是错误的。 - Ankur

这个与:not()选择器很容易解决：http://api.jquery.com/not-selector/ - Jen-Ya

1

为什么不省略不间断空格？我猜它们是用于空TD的样式目的？

如果是这样，您可以使用以下CSS来解决此问题：

table
{
    empty-cells: show;
}

已更正的CSS。

- Kevin Boucher

我试过了，对我的问题没有用。不过还是谢谢你的建议。 - user1040259

@Ankur，真正的问题是如何让他的选择器起作用。为什么我的建议行不通？ - Kevin Boucher

@KevinBoucher你的建议会隐藏单个TD（我想）-而OP想要隐藏TR，仅当行中的所有TD都为空时。 - logical Chimp

@chimp 是的，我意识到了，请查看已更正的 CSS -- 我的观点是为什么要使用  ？没有它们，他的选择器也能工作 -- 也不需要 .each 循环。 - Kevin Boucher

没错，现在它会工作了，那个评论是针对之前的答案的，+1。 - Ankur

显示剩余2条评论

1

$('tr').each(function(){
  var emptyTdArray=$(this).find('td:not(:.requirementRight,:empty)').filter(function() {     
  return $(this).html()!= "&nbsp;";  
  });

  if(emptyTdArray.length==0)
  {
     $(this).hide();
  }
});

- Bhushan Kawadkar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maktouch · Accepted Answer

如果“如果为空”不清楚，因为在您的示例中它们填充了“nbsp”。这就是我创建一个名为isEmpty（）的函数的原因，这样您就可以在其中定义自定义规则。由于您不想要requirementRight，所以我添加了td:not（.requirementRight）。这不是正确的做法。

正确的方法是，在a-h上放置第二个类，例如：

<tr>
    <td class="requirementRight">Requirement</td>
    <td class="checkempty a">&nbsp;</td>
    <td class="checkempty b">&nbsp;</td>
    <td class="checkempty c">&nbsp;</td>
    <td class="checkempty d">&nbsp;</td>
    <td class="checkempty e">&nbsp;</td>
    <td class="checkempty f">NOT EMPTY</td>
    <td class="checkempty g">&nbsp;</td>
    <td class="checkempty h">&nbsp;</td>
  </tr>

所以我们可以调用 tr.find(tr.checkempty)...

无论如何，下面是代码！

$("tr").each(function() {
  var trIsEmpty = true;
  var tr = $(this);

    tr.find("td:not(.requirementRight)").each(function() {
      td = $(this);

        if (isEmpty(td) === false)  {
         trIsEmpty = false;   
        }
    });

    if (trIsEmpty == true) {
         tr.hide();                       
    }
});

    function isEmpty(td) {
        if (td.text == '' || td.text() == ' ' || td.html() == '&nbsp;' || td.is(":not(:visible)")) {
            return true;
        }            

        return false;
    }

Working Example: http://jsfiddle.net/FeQ7h/7/