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://dl.glzy8.com/img/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需刷新才能执行]