Question

我想检查空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
}

Answer 1

“如果为空”不清楚，因为在您的示例中，它们充满了“nbsp”。这就是我创建一个名为isEmpty（）的函数的原因，因此您可以在那里定义自定义规则。既然你不想要requireRight，我把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;
    }

工作示例：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()!= "&nbsp;";  
  });

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

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

5 个答案: