javascript - JQueryまたはCSSを使用してテーブルの行の色を変更したい

Question

行の色を変更したい。
好き、

5行ごとにTRの色を変更します。
最初の5行は緑（0〜4行）、
次の5行は赤（5〜9行）、
次の5行は黄色（10〜14行）
など......

Answer 1

あなたは以下のように何かをすることができます、各要素のインデックスをチェックしてください、そしてあなたが望むように背景色をポップするよりも....thiwはあなたのために簡単に働きます..

$('#table tr').each(function(index)
{   
    if( index < 5) 
     $(this).css("background-color", "#000000"); //change color code as you need
    else if( index < 10) 
     $(this).css("background-color", "#0000FF"); //change color code as you need
    else if( index < 15) 
     $(this).css("background-color", "#00FF00"); //change color code as you need
  //////go on for others

}); 

Answer 2

これまでに試したことを投稿していないので、以下のドキュメントをお読みください。シンプルですが、Wh​​oisは常に、質問する前に独自の調査を行います。 http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

Answer 3

これを試してください-純粋なCSSソリューション。

// n starts from 0 to infinity. 
// for n+1
//     0+1 = 1
//     1+1 = 2
//     2+1 = 3
//     ... so on...

table tr:nth-child(n+1) {
  color: green;
}
table tr:nth-child(n+6) {
  color: red;
}
table tr:nth-child(n+11) {
  color: yellow;
}

デモ： http： //jsfiddle.net/29zrT/

詳細：http ：//css-tricks.com/how-nth-child-works/

Answer 4

shipluのコードのバージョン：

var t = document.getElementById("tbl");
rows = t.rows;
var colours = ['yellow','green','red'];
var group = 5;
var k = colours.length * group;

for(var j=0, jLen = rows.length; j<jLen; j++){
    rows[j].style.backgroundColor = colours[(j%k)/group | 0];
}

これにより、5つのセットで行が同じ色になります。15行（グループ化された行の数×色の数）を超える場合は、パターンが再開されます。