表格奇偶行设置不同颜色的核心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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
js实现搜索提示框效果
Sep 05 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的中问验证码
2006/11/25 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python使用Berkeley DB数据库实例
2014/09/26 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python 调用HBase的简单实例
2016/12/18 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
全球性的女装店:storets
2019/06/12 全球购物
党支部换届选举方案
2014/05/08 职场文书
公司担保书范文
2014/05/21 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
党支部四风整改方案
2014/10/25 职场文书
学校师德师风整改措施
2014/10/27 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书