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 相关文章推荐
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
fastadmin中调用js的方法
May 14 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php实现短信发送代码
2015/07/05 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Dom操作之兼容技巧分享
2011/09/20 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
在python中使用with打开多个文件的方法
2019/01/07 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
C有"按引用传递"吗
2016/09/06 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
军训自我鉴定范文
2014/02/13 职场文书
电子商务专业求职信
2014/03/08 职场文书
请假条的格式
2014/04/11 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
工作态度检讨书范文
2015/05/06 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Vue全局事件总线你了解吗
2022/02/24 Vue.js