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


Posted in Javascript onApril 01, 2013

【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>
Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 #Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 #Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 #Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 #Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 #Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 #Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 #Javascript
You might like
php的一个简单加密解密代码
2014/01/14 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
python中logging包的使用总结
2018/02/28 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
DBA的职责都有哪些
2012/05/16 面试题
C#和SQL Server的面试题
2016/08/12 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
在校学生职业规划范文
2014/01/08 职场文书
贷款承诺书范文
2014/05/19 职场文书
学校志愿者活动总结
2014/06/27 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2014年维修工作总结
2014/11/22 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年维修工作总结
2015/04/25 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL