表格奇偶行设置不同颜色的核心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 相关文章推荐
js实现select组件的选择输入过滤代码
Oct 14 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
php如何获取Http请求
2020/04/30 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
从零学Python之hello world
2014/05/21 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
eBay德国站:eBay.de
2017/09/14 全球购物
七年级生物教学反思
2014/01/30 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
单身申明具结书
2015/02/26 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书