富贵资源网 Design By www.hznty.com
【Title】[原]表格单元格交错着色
【Abstract】以空间换时间,循环确定所着颜色。
【Environment】jQuery
【Author】wintys (wintys@gmail.com) 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>
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。