jquery实现奇偶行赋值不同css值


Posted in Javascript onFebruary 17, 2012

效果如下:

jquery实现奇偶行赋值不同css值 
使用jquery我们可以轻松的实现上面效果,代码如下:

<html> 
<head> 
<title>jquery奇偶行css效果</title> 
<script src="http://img.3water.com/jslib/jquery/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
/*table中偶数行*/ 
.tabEven 
{ 
background: #9d8e8b; 
} 
/*table中奇数行*/ 
.tabOdd 
{ 
background: #ffffff; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#datalist tr:even").addClass("tabEven"); 
$("#datalist tr:odd").addClass("tabOdd"); 
}); 
</script> 
</head> 
<body> 
<table id="datalist"> 
<tr><td>第1行</td></tr> 
<tr><td>第2行</td></tr> 
<tr><td>第3行</td></tr> 
<tr><td>第4行</td></tr> 
<tr><td>第5行</td></tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
javascript对象的相关操作小结
May 16 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 #Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 #Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 #Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 #Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 #Javascript
javascript简易缓动插件(源码打包)
Feb 16 #Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 #Javascript
You might like
php去除html标记的原生函数详解
2015/01/27 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python 正则式使用心得
2009/05/07 Python
python实现的文件夹清理程序分享
2014/11/22 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python实现视频分帧效果
2019/05/31 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
仓库理货员岗位职责
2013/12/18 职场文书
学子宴答谢词
2014/01/25 职场文书
竞争上岗实施方案
2014/03/21 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
检讨书模板大全
2015/05/07 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
消防安全培训工作总结
2015/10/23 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
vue使用element-ui按需引入
2022/05/20 Vue.js