javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

这篇文章主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下

本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml" > 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>Table间隔色以及选择高亮(和动态切换数据)</title> 
7. <script type="text/javascript"> 
8. var Datas1 = { 
9. "李莫": "毕业于清华大学", 
10. "周平": "毕业于北京大学", 
11. "罗达": "毕业于哈尔滨大学", 
12. "郑朵": "毕业于河南大学", 
13. "王天": "毕业于湖南大学" 
14. }; 
15. var Datas2 = { 
16. "武林网": "http://www.vevb.com", 
17. "搜狐网": "http://www.souhu.com", 
18. "CSDN程序员开发网站": "http://www.csdn.net", 
19. "百度": "http://www.baidu.com", 
20. "网易": "http://www.163.com" 
21. }; 
22. function ToggleData() { 
23. var btn = document.getElementById("btnToggle"); 
24. if (btn.value == "数据1") { 
25. loadData(Datas1, "数据2"); 
26. } 
27. else { 
28. loadData(Datas2, "数据1"); 
29. } 
30. } 
31. function loadData(Datas,btnValue) { 
32. var tblMain = document.getElementById("tblMain"); 
33. //清空table数据 
34. var trs = tblMain.getElementsByTagName("tr"); 
35. var trsLen = trs.length; 
36. //必须先把trs的长度存放到一个变量中 
37. for (var i = 0; i < trsLen; i++) { 
38. tblMain.deleteRow(0); 
39. } 
40. var nIndex = 0; 
41. for (var key in Datas) { 
42. var tr = tblMain.insertRow(-1); 
43. tr.onmouseover = trMouseOver; 
44. tr.onmouseout = trMouseOut; 
45. var td1 = tr.insertCell(-1); 
46. td1.innerHTML = key; 
47. var td2 = tr.insertCell(-1); 
48. td2.innerHTML = Datas[key]; 
49. if (nIndex % 2 == 0) { //设置间隔色 
50. tr.style.background = "yellow"; 
51. } 
52. else { 
53. tr.style.background = "white"; 
54. } 
55. nIndex++; 
56. } 
57. var btn = document.getElementById("btnToggle"); 
58. btn.value = btnValue; 
59. } 
60. function trMouseOver() { 
61. var tblMain = document.getElementById("tblMain"); 
62. //清空数据 
63. var trs = tblMain.getElementsByTagName("tr"); 
64. for (var i = 0; i < trs.length; i++) {  
65. if (this == trs[i]) { 
66. trs[i].style.background = "green"; 
67. } 
68. } 
69. } 
70. function trMouseOut() { 
71. var tblMain = document.getElementById("tblMain"); 
72. var trs = tblMain.getElementsByTagName("tr"); 
73. for (var i = 0; i < trs.length; i++) { 
74. if (i % 2 ==0) { 
75. trs[i].style.background = "yellow"; 
76. } 
77. else { 
78. trs[i].style.background = "white"; 
79. } 
80. }  
81. } 
82. function iniEvent() { 
83. loadData(Datas1, "数据2"); 
84. } 
85. </script> 
86. </head> 
87. <body onload="iniEvent()"> 
88. <table id="tblMain"> 
89. <tbody></tbody> 
90. </table> 
91. <input type ="button" id="btnToggle" value="数据2" 
92. onclick="ToggleData()" /> 
93. </body> 
94. </html> 

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