代码片段如下：

 
  
  1. <style type="text/css" media="screen">  
  2. table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}  
  3. table td {border:solid #999;border-width:0 1px 1px 0;}  
  4. tr.t1 td {background-color:#fff;}/* 第一行的背景色 */ 
  5. tr.t2 td {background-color:#eee;}/* 第二行的背景色 */ 
  6. tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */ 
  7. tr.t4 td {background-color:#E2EBED;}  
  8. </style> 
 
  
 
 
  
 
  
  1. <table border="1" width="100%" id="tab"> 
  2.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  3.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  4.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  5.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  6.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  7.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  8.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  9.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  10.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  11.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  12.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  13.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  14.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  15.     <tr><td>11</td><td>11</td><td>11</td></tr> 
  16. </table>   
  17. <script type="text/javascript"> 
  18. var Ptr=document.getElementById("tab").getElementsByTagName("tr");  
  19. function $() {  
  20.     for (i=2;i<Ptr.length+1;i++) {   
  21.         Ptr[i-1].className = (i%2>0)?"t1":"t2";   
  22.     }  
  23. }  
  24. window.onload=$;  
  25. for(var i=1;i<Ptr.length;i++) {  
  26.     Ptr[i].onmouseover=function(){  
  27.     thisthis.tmpClass=this.className;  
  28.     this.className = "t3";      
  29.     };  
  30.     Ptr[i].onmouseout=function(){  
  31.     thisthis.className=this.tmpClass;  
  32.     };  
  33. }  
  34. </script>