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


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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
vue 实现动态路由的方法
Jul 06 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 date函数参数详解
2006/11/27 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python妙用之编码的转换详解
2017/04/21 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python针对excel的操作技巧
2018/03/13 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
英语硕士生求职简历的自我评价
2013/10/15 职场文书
班级聚会策划书
2014/01/16 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
后备干部考察材料
2014/02/12 职场文书
实习公司领导推荐函
2014/05/21 职场文书
村党支部公开承诺书
2014/05/29 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
关于召开会议的通知
2015/04/15 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL