表格奇偶行设置不同颜色的核心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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
js格式化时间的方法
Dec 18 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
详解vue-router导航守卫
Jan 19 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP实现的策略模式示例
2019/03/20 PHP
简单JS代码压缩器
2006/10/12 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python类继承用法实例分析
2015/05/27 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
高三自我鉴定范文
2013/10/19 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
股权转让意向书
2014/04/01 职场文书
孝女彩金观后感
2015/06/10 职场文书
给朋友的赠语
2015/06/23 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
谢师宴学生致辞
2015/07/27 职场文书
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技