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 photoFrame 图片边框美化显示插件
Jun 28 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
javascript数组排序汇总
Jul 07 Javascript
javascript中 try catch用法
Aug 16 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
javascript下string.format函数补充
2010/08/24 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
浅析return false的正确使用
2013/11/04 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
谈谈JS中的!!
2017/12/07 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python列出目录下指定文件与子目录的方法
2015/07/03 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python如何读写CSV文件
2020/08/13 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
高级Java程序员面试要点
2013/08/02 面试题
小学二年级学生评语
2014/04/21 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Python实现批量自动整理文件
2022/03/16 Python
Nginx配置使用详解
2022/07/07 Servers