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 不能释放内存.
Sep 07 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
详解ES6中的let命令
Apr 05 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 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和ACCESS写聊天室(一)
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python3内置模块random随机方法小结
2019/07/13 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python爬取某平台短视频的方法
2021/02/08 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
晚宴邀请函范文
2014/01/15 职场文书
交通工程专业推荐信
2014/09/06 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers