表格奇偶行设置不同颜色的核心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 add event remove event
Apr 07 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
VUE-ElementUI 自定义Loading图操作
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
在JavaScript中调用php程序
2009/03/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
matplotlib中legend位置调整解析
2017/12/19 Python
python3判断url链接是否为404的方法
2018/08/10 Python
Python的log日志功能及设置方法
2019/07/11 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python hashlib模块实例使用详解
2019/12/24 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
React配置子路由的实现
2021/06/03 Javascript