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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
window.onload使用指南
Sep 13 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
package.json文件配置详解
Jun 15 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
node.js中的http.get方法使用说明
2014/12/14 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
索赔员岗位职责
2015/02/15 职场文书
施工现场安全管理制度
2015/08/05 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Python 中random 库的详细使用
2021/06/03 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS