2012-05-30 67 views
0

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

以下是在线DEMO

我的代码检查脚本

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> 

回答

1

现在正在工作。

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

+0

嗨@MajoB感谢您的帮助。即时通讯设法粘贴您的cpde在我的网页,但它没有给出相同的结果plz检查我的代码,并告诉我什么是我的代码在这里的问题在线演示链接http://jsfiddle.net/QnVdE/7/ ... ..对不起,请求更多 – Kamal

+1

@Kamal我的代码不工作? :o我刚刚做了一些编辑 –

+0

感谢@SiGanteng的帮助 – Kamal

3

那是因为你被宣布a0在每次迭代,可以将变量传递到each的匿名函数来获取元素的索引被迭代:

$('#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/

+0

感谢您的帮助,但我想申请上''不断代码只适用于第3'' – Kamal

+0

@Kamal我做了一个编辑CSS,你看到了吗?带'idx%3'的部分 –

+0

@Kamal http://jsfiddle.net/QnVdE/2/ –

0
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++; 


}) 
+1

不工作http://jsfiddle.net/QnVdE/4/ –

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