11

空の TD (クラス ah のみ) をチェックしたいのですが、すべてが空の場合は、親 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
} ​
4

5 に答える 5

5

「空の場合」は明確ではありません。あなたの例では、「nbsp」で埋められているためです。これが、isEmpty（）という関数を作成して、そこでカスタムルールを定義できるようにした理由です。あなたはrequirementRightを望まなかったので、私はtd：not（.requirementRight）を置きました。これは正しい方法ではありません。

それを行う正しい方法は、ああに2番目のクラスを置くことです。

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

于 2012-10-11T18:49:58.947 に答える
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/

于 2012-10-11T18:47:11.793 に答える
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();
});
于 2012-10-11T18:45:05.303 に答える
1 
$('tr').each(function(){
  var emptyTdArray=$(this).find('td:not(:.requirementRight,:empty)').filter(function() {     
  return $(this).html()!= "&nbsp;";  
  });

  if(emptyTdArray.length==0)
  {
     $(this).hide();
  }
});
于 2012-10-11T19:22:16.527 に答える
1

非改行スペースを除外しないのはなぜですか? 空の TD のスタイリング目的であると思いますか?

その場合、この CSS を使用してその問題を解決できます。

table
{
    empty-cells: show;
}

CSSを修正しました。

于 2012-10-11T18:40:35.393 に答える