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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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
PHP mkdir()定义和用法
2009/01/14 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
vue实现计算器功能
2020/02/22 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python实现二分法算法实例
2015/02/02 Python
Python线程详解
2015/06/24 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python 中split 和 strip的实例详解
2017/07/12 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
详解Python字符串切片
2019/05/20 Python
python中update的基本使用方法详解
2019/07/17 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
农村改厕实施方案
2014/03/22 职场文书
大学生求职计划书
2014/04/30 职场文书
物理学专业求职信
2014/07/04 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript
Python jiaba库的使用详解
2021/11/23 Python