The example of this article describes the method of jquery to implement table color alternating display. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery enables alternating display of table colors </title>
<script type= "Text/javascript" src= "Js/jquery1.3.2.js" ></script>
<script type= "Text/javascript" >
JQuery (document). Ready (function () {
JQuery (". TrueColor tr:odd"). AddClass ("Color1");
JQuery (". TrueColor tr:even"). AddClass ("Color2");
JQuery (". TrueColor tr"). Hover (function () {
JQuery (This). addclass ("Color3")
},function () {
JQuery (This). Removeclass ("Color3")
});
});
</script>
<style type= "Text/css" >
. truecolor {border:1px solid #333; text-align:center;}
. truecolor th {background-color: #333; color: #FFF;}
. color1 {background-color: #DDD; color: #333;}
. color2 {background-color: #EEE; color: #333;}
. Color3 {background-color: #666; color: #FFF;}
</style>
<body>
<table width= "450" class= "TrueColor" >
<thead>
<tr>
<th> Blog </th>
<th> author </th>
<th> website </th>
</tr>
</thead>
<tbody>
<tr>
Dance of <td> style </td>
<td> Fire de </td>
<td> Alternate Color </td>
</tr>
<tr>
<td> Zhao Rei's blog </td>
<td> Zhao Rei </td>
<td> Sina Micro-blog </td>
</tr>
<tr>
<td> Lonely Square </td>
<td> Wei Chunliang </td>
<td> Alumni </td>
</tr>
<tr>
<td> Taobao ued</td>
<td> Taobao </td>
<td> Regular Shopping </td>
</tr>
</tbody>
</table>
</body>
I hope this article will help you with your jquery programming.
