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

Question

我想检查空的 TD（仅限类啊），如果都是空的，那么我想隐藏父 TR。我遇到的问题是，我的空 TD 包含“”我不确定如何测试这些？

http://jsfiddle.net/FeQ7h/1/

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

​</p>

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
} ​

Answer 1

“如果为空”不清楚，因为在您的示例中，它们充满了“nbsp”。这就是我创建一个名为 isEmpty() 的函数的原因，以便您可以在其中定义自定义规则。因为你不想要requirementRight，所以我放了td:not(.requirementRight)。这不是正确的方法。

正确的做法，就是上二班啊，比如

<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() == ' ' || td.is(":not(:visible)")) {
            return true;
        }            

        return false;
    }
​

工作示例：http: //jsfiddle.net/FeQ7h/7/

Answer 2

这就是您要查找的内容：

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

Answer 3

首先，我建议给 TD 一个额外的类来区分要检查其内容的 TD。下面，我使用了 .et (emptyTest)。

下面的语法可能有点错误，但它应该给你的想法：

$("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();
});

Answer 4

为什么不省略不间断的空格？我猜他们是为了在空的 TD 上进行造型设计的？

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

table
{
    empty-cells: show;
}

更正了 CSS。

Answer 5

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

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