表格奇偶行设置不同颜色的核心JS代码


Posted in Javascript onDecember 24, 2013

这是一个比较实用的功能,设置奇偶行颜色不同后阅读表格数据的体验明显变好,否则数据会显得非常繁杂拥挤(当表格数据行多时体验尤为明显)。只有当你自己真正做这方面的东西接触到时才有强烈的体会,反正我是刚刚经历了,留在这里备参考吧~

核心JS脚本代码如下(table元素的id根据自己的情况调整,代码中的jquery-1.7.min.js可以到jquery的官网上下载)

<script src="jquery-1.7.min.js"></script> 
<script> 
$(document).ready(function(){ 
SetTableRowColor(); }); 
//用CSS控制奇偶行的颜色 
function SetTableRowColor() 
{ 
$("#Table tr:odd").css("background-color", "#e6e6fa"); 
$("#Table tr:even").css("background-color", "#fff0fa"); 
} 
</scirpt>
Javascript 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
js中function()使用方法
Dec 24 #Javascript
document节点对象的获取方式示例介绍
Dec 24 #Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 #Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 #Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 #Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 #Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 #Javascript
You might like
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python中异常重试的解决方案详解
2017/05/05 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
什么是网络协议
2016/04/07 面试题
大众服装店创业计划书范文
2014/01/01 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python