【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代码
复制代码 代码如下:
