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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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获取url的函数代码
2011/08/02 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
Java基础知识面试题
2014/03/25 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
大学毕业生通用自我评价
2014/01/05 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
个人贷款担保书
2014/04/01 职场文书
租车协议书范本
2014/04/22 职场文书
教室标语大全
2014/06/21 职场文书
行政处罚告知书
2015/07/01 职场文书
企业法人任命书
2015/09/21 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS