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


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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
初学JavaScript第二章
Sep 30 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
用js简单提供增删改查接口
May 12 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
apache rewrite_module模块使用教程
2008/01/10 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
javascript动态加载三
2012/08/22 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python反编译学习之字节码详解
2019/05/19 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python打开使用的方法
2019/09/30 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python接口开发实现步骤详解
2020/04/26 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
药店促销活动策划方案
2014/08/24 职场文书
公司庆典欢迎词
2015/01/26 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python