编程 Javascript

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程序设计有所帮助。

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

- Author -

lyflcear

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

AJAX架构之Dojo篇

Apr 10 Javascript

Seajs的学习笔记

Mar 04 Javascript

浅谈JavaScript实现面向对象中的类

Dec 09 Javascript

JavaScript设计模式之建造者模式介绍

Dec 28 Javascript

jQuery的one()方法用法实例

Jan 19 Javascript

JavaScript中的普通函数与构造函数比较

Apr 07 Javascript

AngularJS仿苹果滑屏删除控件

Jan 18 Javascript

基于Jquery和html5实现炫酷的3D焦点图动画

Mar 02 Javascript

聊一聊JS中的prototype

Sep 29 Javascript

Vue computed计算属性的使用方法

Jul 14 Javascript

微信小程序webview 脚手架使用详解

Jul 22 Javascript

Vue 实现复制功能,不需要任何结构内容直接复制方式

Nov 09 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