javascript实现table表格隔行变色的方法

这篇文章主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下

本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>table间隔色</title> 
5. <script type="text/javascript"> 
6. function SetTableColor() { 
7. var tbl = document.getElementById("tblMain"); 
8. var trs = tbl.getElementsByTagName("tr"); 
9. for (var i = 0; i < trs.length; i++) { 
10. var j = i + 1; 
11. if (j % 2 == 0) { //偶数行 
12. trs[i].style.background = "yellow"; 
13. } 
14. else { 
15. trs[i].style.background = "blue"; 
16. } 
17. } 
18. } 
19. </script> 
20. </head> 
21. <body onload="SetTableColor()"> 
22. <table id="tblMain" border="1"> 
23. <tr> 
24. <td>1</td> 
25. <td>三星</td> 
26. <td>AA</td> 
27. </tr> 
28. <tr> 
29. <td>2</td> 
30. <td>Norkia</td> 
31. <td>BB</td> 
32. </tr> 
33. <tr> 
34. <td>3</td> 
35. <td>苹果</td> 
36. <td>CC</td> 
37. </tr> 
38. <tr> 
39. <td>4</td> 
40. <td>联想</td> 
41. <td>DD</td> 
42. </tr> 
43. <tr> 
44. <td>5</td> 
45. <td>小米</td> 
46. <td>EE</td> 
47. </tr> 
48. <tr> 
49. <td>6</td> 
50. <td>HTC</td> 
51. <td>FF</td> 
52. </tr> 
53. </table> 
54. </body> 
55. </html> 

希望本文所述对大家的javascript程序设计有所帮助。