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将NodeList作为Array数组处理的方法
Jul 09 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
浅谈PHP进程管理
2019/03/08 PHP
javascript 函数调用规则
2009/08/26 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
javascript连续赋值问题
2015/07/08 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
vue元素实现动画过渡效果
2017/07/01 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JavaScript实现连连看连线算法
2019/01/05 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
培训专员岗位职责
2014/02/26 职场文书
高考备战决心书
2014/03/11 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
python中opencv实现图片文本倾斜校正
2021/06/11 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android