表格单元格交错着色实现思路及代码
2013-04-01 00:00
435 查看
【Title】[原]表格单元格交错着色
【Abstract】以空间换时间,循环确定所着颜色。
【Environment】jQuery
【Author】wintys (wintys@gmail.com) http://wintys.cnblogs.com
【Content】:
1、效果
2、问题描述
对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。
3、实现
3.1、CSS
3.2、JS代码
【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>
相关文章推荐
- iOS之UIScrollView实现无限滚动,思路与代码
- 纯代码系列:Python实现验证码图片(PIL库经典用法用法,爬虫12306思路)
- ASP.NET 大文件下载的实现思路及代码
- ASP.NET 大文件下载的实现思路及代码
- Json数据转换list对象实现思路及代码
- Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路
- extjs tabpanel限制选项卡数量实现思路及代码
- php生成SessionID和图片校验码的思路和实现代码
- jquery 页眉单行信息滚动显示实现思路及代码
- div+css无图边框圆角实现思路及代码
- 为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
- 着色问题的代码实现(java版)使用回溯法和贪心思想
- 可以用鼠标拖动的DIV实现思路及代码
- jquery ajax实现批量删除具体思路及代码
- Android模拟器中窗口截图存成文件实现思路及代码
- Asp.net简单代码设置GridView自适应列宽不变形实现思路与代码
- 权限思路及代码实现
- C#对称加密(AES加密)每次生成的结果都不同的实现思路和代码实例
- ASP.NET简化编辑界面解决思路及实现代码(2)