jQueryでテーブル行を動的に非表示にする

Question

テーブル行の背景色を変えようとしています。各行は同じ色で始まります。私はまた、各TBODYセクション内部に表示される行の数（例えば5）を制限できるようにする必要

$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); }); 

：私は、次のコードでこれを達成しています。これらは、.click（）イベントのボタンで切り替えることができる必要があります。誰も私がこれを達成する方法を知っていますか？私が思いついた唯一の解決策は、背景の色が壊れる原因となった。どんな助けでも大歓迎です！

<table> 
    <tbody> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
    </tbody> 

    <tbody> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
     <tr> 
      <td>Cell Contents</td> 
      <td>Cell Contents</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

これはトリックを行う必要があります。

Answer 2

スクロール：ここ

は、テーブル構造の一例です。テーブルの高さを5行に設定してから、CSSを使用します。

オーバーフローが発生しました。 ：

$(function() { 
    $('#showAll').click(function() { 
     $('table > tbody').each(function() { 
      $(this).children('tr:gt(4)').toggle(); 
     }); 
     $("tr:visible").filter(':odd').css("background", "#efefef").end() 
      .filter(':even').css("background", "#ffffff"); 
    }).click(); 
}); 

編集コードをクリーンアップする（@ karim79の答えに触発さ）：D

Answer 3

これは、それが（テスト）ん：

var rowLimit = 5; 
$(document).ready(function() { 
    $('button').click(function() { 
     //hide everything after the rowLimit row 
     $('table > tbody > tr:gt(' + (rowLimit - 1) + ')').toggle(); 
    }); 
}); 

キーは、消失からあなたの行のスタイルを防ぐCSSクラスに入れて、代わりに適用するaddClassとremoveClassを使用するにはgt selector

であります彼らはクラスに属していない場合、それらは存在しないことを念頭に置いておいてください:)