html如何设置表格交错颜色,表格单元格交错着色实现思路及代码

【Title】[原]表格单元格交错着色

【Abstract】以空间换时间，循环确定所着颜色。

【Environment】jQuery

【Author】wintys (wintys@gmail.com) http://wintys.cnblogs.com

【Content】:

1、效果

 

2、问题描述

对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。

TR0-TD0	TR0-TD1	TR0-TD2	TR0-TD3
TR1-TD0	TR1-TD1	TR1-TD2	TR1-TD3
TR2-TD0	TR2-TD1	TR2-TD2	TR2-TD3
TR3-TD0	TR3-TD1	TR3-TD2	TR3-TD3

3、实现

3.1、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;

}

3.2、JS代码

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();

});