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 面向对象编程基础:封装
Aug 21 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Highcharts学习之数据列
Aug 03 Javascript
ES6数组的扩展详解
Apr 25 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
改变layer confirm弹窗按钮的颜色方法
Sep 12 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 Ajax乱码
2008/04/09 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
php中yii框架实例用法
2020/12/22 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue实现通讯录功能
2018/07/14 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python完全新手教程
2007/02/08 Python
python使用cookie库操保存cookie详解
2014/03/03 Python
python设置随机种子实例讲解
2019/09/12 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python字典的值可以修改吗
2020/06/29 Python
局域网标准
2016/09/10 面试题
酒店管理自荐信
2013/10/23 职场文书
法律专业应届本科毕业生求职信
2013/10/25 职场文书
专科毕业生学习生活的自我评价
2013/10/26 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
浅谈Python基础之列表那些事儿
2021/05/11 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers