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 页面划词搜索JS
Sep 28 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
常用jQuery选择器总结
Jul 11 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 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实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php简单日历函数
2015/10/28 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
入党自荐书范文
2014/03/09 职场文书
科研课题实施方案
2014/03/18 职场文书
公司委托书范本
2014/04/04 职场文书
股东合作协议书
2014/04/14 职场文书
分居协议书范本
2014/11/03 职场文书
承诺函范文
2015/01/21 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android