表行颜色改变

Question

朋友你好我想改变每个<tr>的背景颜色我试图做同样没有得到结果我知道我的代码中有一些问题。请帮帮我

以下是我的代码在线检查 DEMO

SCRIPT

var b = new Array('col_one','col_two','col_three');

$('#tbl tr').each(function(){

var a = 0;

$('#tbl tr').addClass(b[a])

a++;


})

CSS

.col_one
{
    background:#000099;
}
.col_two
{
    background:#009966;
}
.col_three
{
    background:#663333;
}

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tbl">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 1

这是因为您在每次迭代时声明a为0，您可以将变量传递给each的anon函数以获取要迭代的元素的索引： / p>

$('#tbl tr').each(function(idx){

   // $(this) refers to the jQuery object of each tr
   $(this).addClass(b[idx%3]); // re-use colors when idx > 3
})

http://jsfiddle.net/QnVdE/2/

Answer 2

现在正在运作。

http://jsfiddle.net/QnVdE/3/

Answer 3

var b = new Array('col_one','col_two','col_three');
var a = 0;
$('#tbl tr').each(function(){
if(a > 2){a=0;}
$(this).addClass(b[a]);

a++;


})

Answer 4

var b = ['col_one','col_two','col_three'];
var a = 0;
$('#tbl tr').each(function(){
    $(this).addClass(b[a % b.length]);
    a++;
});