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 在页面加载后执行的几种方式
Mar 14 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
jQuery动态添加
Apr 07 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue实现表单录入小案例
Sep 27 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 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按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
可实现多表单提交的javascript函数
2007/08/01 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python any()函数的使用方法
2019/10/28 Python
python元组的概念知识点
2019/11/19 Python
keras topN显示,自编写代码案例
2020/07/03 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
韩国商务邀请函
2014/01/14 职场文书
机关节能减排实施方案
2014/03/17 职场文书
庆祝儿童节标语
2014/10/09 职场文书
初中生毕业评语
2014/12/29 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
初二英语教学反思
2016/02/15 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL