表格单元格交错着色实现思路及代码

【Title】[原]表格单元格交错着色
【Abstract】以空间换时间，循环确定所着颜色。
【Environment】jQuery
【Author】wintys ([e-mail]) http://wintys.cnblogs.com
【Content】:
1、效果
 
2、问题描述
对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。

<div id="tablecontainer" align="center"> 
<table style="border-collapse:collapse;" cellspacing="0"> 
<tbody> 
<tr> 
<td><a href="http://www.yunyun.com/">TR0-TD0</a></td> 
<td><a href="http://www.yunyun.com/">TR0-TD1</a></td> 
<td><a href="http://www.yunyun.com/">TR0-TD2</a></td> 
<td><a href="http://www.yunyun.com/">TR0-TD3</a></td> 
</tr> 
<tr> 
<td><a href="http://www.yunyun.com/">TR1-TD0</a></td> 
<td><a href="http://www.yunyun.com/">TR1-TD1</a></td> 
<td><a href="http://www.yunyun.com/">TR1-TD2</a></td> 
<td><a href="http://www.yunyun.com/">TR1-TD3</a></td> 
</tr> 
<tr> 
<td><a href="http://www.yunyun.com/">TR2-TD0</a></td> 
<td><a href="http://www.yunyun.com/">TR2-TD1</a></td> 
<td><a href="http://www.yunyun.com/">TR2-TD2</a></td> 
<td><a href="http://www.yunyun.com/">TR2-TD3</a></td> 
</tr> 
<tr> 
<td><a href="http://www.yunyun.com/">TR3-TD0</a></td> 
<td><a href="http://www.yunyun.com/">TR3-TD1</a></td> 
<td><a href="http://www.yunyun.com/">TR3-TD2</a></td> 
<td><a href="http://www.yunyun.com/">TR3-TD3</a></td> 
</tr> 
</tbody> 
</table> 
</div>

3、实现
3.1、CSS

<style type="text/css"> 
.tableitem0 { 
background: none repeat scroll 0 0 #F65314; 
color: #FFFFFF; 
} 
.tableitem1 { 
background: none repeat scroll 0 0 #7CBB00; 
color: #FFFFFF; 
} 
.tableitem2 { 
background: none repeat scroll 0 0 #00A1F1; 
color: #FFFFFF; 
} 
.tableitem3 { 
background: none repeat scroll 0 0 #FFBB00; 
color: #FFFFFF; 
} 
#tablecontainer td { 
padding: 5px; 
} 
.tableitem { 
width: 15%; 
} 
.tableitem a { 
display: block; 
font-size: 18px; 
height: 35px; 
margin: 0 auto; 
padding: 15px 20px; 
text-align: center; 
border-bottom:none; 
} 
.tableitem a:hover, .tableitem a:visited { 
color: #FFFFFF !important; 
} 
.tableitem a:hover, .tableitem a:active{ 
opacity: 0.8; 
} 
</style>

3.2、JS代码

<script type="text/javascript"> 
function setTableStyle(){ 
$("#tablecontainer tr").each(function(i){//获得所有的tr，进行each循环遍历，并对每个进行操作 
var tr = $(this);//得到本次循环里的这个tr 
setTableItemStyle(tr,i%4);//每行四个单元格，四种颜色循环交错着色。 
}); 
} 
function setTableItemStyle(tr,base){ 
//【重点】：以空间换时间，循环确定所着颜色。 
var tableitem = ["tableitem0","tableitem1","tableitem2","tableitem3","tableitem0","tableitem1","tableitem2"]; 
for(var i = 0; i < 4;i ++){ 
var td = tr.children("td").eq(i); 
var td_a = td.find("a"); 
td.addClass("tableitem"); 
//【重点】：base确定起始颜色，i确定本次需要着色的单元格。 
td_a.addClass(tableitem[base + i]); 
} 
} 
$(function(){ 
setTableStyle(); 
}); 
</script>