Table隔行变色的JavaScript代码

用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
核心代码:
代码如下:

1. 
   
2. <table id="datatable">
   
3. <tr>
   
4. <td>1314学习网</td>
   
5. </tr>
   
6. <tr>
   
7. <td>www.discuz.1314study.com</td>
   
8. </tr>
   
9. <tr>
   
10. <td>1314学习网</td>
    
11. </tr>
    
12. <tr>
    
13. <td>www.discuz.1314study.com</td>
    
14. </tr>
    
15. <tr>
    
16. <td>1314学习网</td>
    
17. </tr>
    
18. <tr>
    
19. <td>www.discuz.1314study.com</td>
    
20. </tr>
    
21. <tr>
    
22. <td>1314学习网</td>
    
23. </tr>
    
24. <tr>
    
25. <td>www.discuz.1314study.com</td>
    
26. </tr>
    
27. </table>
    
28. <script>
    
29. function showtable(){
    
30. var color1 = "rgb(234,240,255)";
    
31. var color2 = "rgb(255,255,255)";
    
32. var bgColor = "rgb(255,255,193)";
    
33. var trs = document.getElementById("datatable").getElementsByTagName("tr");
    
34. for (var i=0;i<trs.length-1;i++){
    
35. if (i%2==0) {
    
36. trs[i].style.backgroundColor=color1;
    
37. trs[i].onmouseover = function(){
    
38. this.style.backgroundColor = bgColor;
    
39. }
    
40. trs[i].onmouseout = function(){
    
41. this.style.backgroundColor = color1;
    
42. }
    
43. } else {
    
44. trs[i].style.backgroundColor=color2;
    
45. trs[i].onmouseover = function(){
    
46. this.style.backgroundColor = bgColor;
    
47. }
    
48. trs[i].onmouseout = function(){
    
49. this.style.backgroundColor = color2;
    
50. }
    
51. }
    
52. }
    
53. }
    
54. showtable()
    
55. </script>

复制代码