表格奇偶行设置不同颜色的核心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_ibm
May 16 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
Javascript 继承机制实例
Aug 12 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
基于vue2.0实现的级联选择器
Jun 09 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
JS实现星星海特效
Dec 24 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
php实现的用户查询类实例
2015/06/18 PHP
php如何连接sql server
2015/10/16 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
django使用多个数据库的方法实例
2021/03/04 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
小学运动会口号
2014/06/07 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python