表格奇偶行设置不同颜色的核心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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 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 flush类输出缓冲剖析
2008/10/19 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
面试后感谢信
2014/02/01 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
婚前协议书范本
2014/04/15 职场文书
环境科学专业求职信
2014/08/04 职场文书
软环境建设心得体会
2014/09/09 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
初中英语教学随笔
2015/08/15 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Python学习之时间包使用教程详解
2022/03/21 Python