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 选项卡效果 新手代码
Jul 08 Javascript
js中键盘事件实例简析
Jan 10 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 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
实用函数2
2007/11/08 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Python中自定义函数的教程
2015/04/27 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python微信公众号开发平台
2018/01/25 Python
分析Python读取文件时的路径问题
2018/02/11 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Numpy中的mask的使用
2018/07/21 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
实例详解Python模块decimal
2019/06/26 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python使用建议技巧分享(三)
2020/08/18 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
职称自我鉴定
2013/10/15 职场文书
好军嫂事迹材料
2014/01/15 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
抵押贷款承诺书
2014/05/30 职场文书
宣传普通话标语
2014/06/27 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS