search

Home >Web Front-end >JS Tutorial >How to implement simple interlaced color change with jQuery_jquery

How to implement simple interlaced color change with jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:14:431394browse

The example in this article describes how jQuery implements simple interlaced color change. Share it with everyone for your reference, the details are as follows: 

<!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>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and techniques summary", "jQuery common classic special effects summary", " jQuery extension skills summary", "jquery selector usage summary" and "jquery common operation skills summary"

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery implements simple DIV drag effect_jqueryNext article：jQuery implements simple DIV drag effect_jquery

Related articles

See more