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 相关文章推荐
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
微信小程序实现watch监听
Jun 04 Javascript
详解JavaScript 作用域
Jul 14 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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中的Cannot modify header information 问题
2013/08/12 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
img的onload的另类用法
2008/01/10 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
物流专员岗位职责
2014/02/17 职场文书
领导调研接待方案
2014/02/27 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
模范教师材料大全
2014/12/16 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript