jQueryを使用して複数行レコードの行をストライプする方法は？

Question

私は現在、次のjQueryスクリプトを使用してテーブルの行を強調表示しています。

<script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $('table.grid tbody tr:odd').addClass('alt'); 
     }); 
    </script> 

これは、各行が本当に新しいレコードであるデータのテーブルのための素晴らしい作品は、しかし、私は2つのデータ行を取るレコードを持って問題に遭遇してきたので、jQueryのを修正したいと思います私は「ALT2」のクラスを持っている「ALT1」とすべての4行目のクラスを持っているすべての第三行をしたいのjQueryでこれを実現する方法を

<table> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Record 1 Field 1</td> 
      <td>Record 1 Field 2</td> 
     </tr> 
     <tr> 
      <td colspan="2">Record 1 Field 3</td> 
     </tr> 
     <tr class="alt1"> 
      <td>Record 2 Field 1</td> 
      <td>Record 2 Field 2</td> 
     </tr> 
     <tr class="alt2"> 
      <td colspan="2">Record 2 Field 3</td> 
     </tr> 
     <tr> 
      <td>Record 3 Field 1</td> 
      <td>Record 3 Field 2</td> 
     </tr> 
     <tr> 
      <td colspan="3">Record 1 Field 3</td> 
     </tr> 
     <tr class="alt1"> 
      <td>Record 4 Field 1</td> 
      <td>Record 4 Field 2</td> 
     </tr> 
    <tr class="alt2"> 
     <td colspan="4">Record 2 Field 3</td> 
    </tr> 
</tbody> 
</table> 

：それはのようなものをレンダリングしますか？

Answer 1

上記の回答は少し正確です。 i％3 == 0とi％4 == 0を使用する代わりに、同じモジュラス除数を使用してください。したがって、0から始まり、i％4 == 2、i％4 == 3は2をスキップし、2をスキップし、2をスキップし、2を取るなどです。などだから、マイナーな変更が

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('table.grid tbody tr').each(function(i) { 
      if(i%4 == 2) { 
       //Each 3rd row in sets of 4 
       $(this).addClass('alt1'); 
      } 
      if(i%4 == 3) { 
       //Each 4th row in sets of 4 
       $(this).addClass('alt2'); 
      } 
     }); 
    }); 
</script> 

Answer 2

別の行を使用する場合は、rowspan (HTML) attributeを使用して指定します。

Answer 3

<script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $('table.grid tbody tr').each(function(i) { 
       if(i%3 == 0) { 
        //We're at a 3rd row 
        $(this).addClass('alt1'); 
       } 
       if(i%4 == 0) { 
        //We're at at 4th row 
        $(this).addClass('alt2'); 
       } 
      }); 
     }); 
    </script> 

Answer 4

はおそらく、別のtbodyタグに各レコード（複数行かない）を割り当てることが容易になるだろう。多くのtbodyタグを持つことができます。レコードが複数の行にある場合、別々のtbodyタグの各レコードがここで最も理にかかります。

$('table.grid tbody:odd tr:first').addClass('alt1'); 
$('table.grid tbody:odd tr:last').addClass('alt2');

Answer 5

$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1'); 
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2'); 

（未テスト）動作するはずです。

Answer 6

Hmm - そのテーブル構造はかなり珍しいです - あなたはそのようなテーブルに入れたサンプルデータのいくつかを表示できますか？

ほとんどの場合、ローパースパン（Nerdlingで言及したように）、または本文内に追加のTH要素（各レコードにタイトル行を付けるため）、または両方の組み合わせを使用する方が正確でしょう。

ストラクチャーの詳細レベルを取得したら、ストライプの3rd/stripe第4の値をスクリプトにハードコーディングするのではなく、実際のテーブルの構造を読むためにJavaScriptを書くことができます。たとえば、余分なことをせずに3行レコードを処理するスクリプトで終わるでしょう。

いくつかのサンプルデータを表示することができれば、このスクリプトをうまく使いこなすことができます。