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 src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script> <script> $(document).ready(function() { $('tr').addClass('odd'); $('tr:even').addClass('even'); //奇偶变色，添加样式 }); </script> <style> #hacker tr:hover{ background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用 } .odd { background-color: #ffc; /* pale yellow for odd rows */ } .even { background-color: #cef; /* 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> 下面是一个js版本的，需要的朋友可以参考下。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　JavaScript面向对象之体会[总结]

谈JavaScript的面向对象设计有点牵强，毕竟JavaScript语言本身没有高级语言严谨。看这篇文章之前，希望大家了解c++、java、c#等高级语言，有面向对象编程的基础知识。 1.类的定义： function ClassName(){ } 大家可>>>详细阅读

本文标题：jQuery 表格隔行变色代码[修正注释版]

地址：http://www.17bianji.com/kaifa2/JS/29234.html

1/2 1