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 动画基础教程
Dec 25 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
js css+html实现简单的日历
Jul 14 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
前端 javascript 实现文件下载的示例
Nov 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
菜鸟修复电子管记
2021/03/02 无线电
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Django跨域请求原理及实现代码
2020/11/14 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
机械专业应届生求职信
2013/12/12 职场文书
员工晚婚的请假条
2014/02/08 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
银行委托书范本
2014/09/28 职场文书
2014年护理部工作总结
2014/11/14 职场文书