jQuery实现简单隔行变色的方法


Posted in Javascript onFebruary 20, 2016

本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 奇偶变色</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#hacker").find("tr").addClass("odd");
$("#hacker").find("tr:even").addClass("even");
// $("tr").addClass("odd");
//$("tr:even").addClass("even"); //奇偶变色,添加样式
//$("#hacker tr").addClass("odd");
//$("#hacker tr:even").addClass("even");
});
</script>
<style>
#hacker tr:hover{background-color:red;}
.odd {background-color: #fff; /* pale yellow for odd rows */}
.even {background-color: #000; /* pale blue for even rows */}
</style>
</head>
<body>
<table id="hacker">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
一个原生的用户等级的进度条
Jul 03 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
React手稿之 React-Saga的详解
Nov 12 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 #Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 #Javascript
js面向对象的写法
Feb 19 #Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 #Javascript
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
You might like
咖啡的种类和口感
2021/03/03 新手入门
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
YII路径的用法总结
2014/07/09 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python Property属性的2种用法
2015/06/21 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
linux环境下Django的安装配置详解
2019/07/22 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
工作会议主持词
2014/03/17 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书