JavaScript实现表格点击排序的方法

这篇文章主要介绍了JavaScript实现表格点击排序的方法,可实现点击顶部数据项标题实现对应数据列的排序效果,涉及javascript鼠标事件及数据排序的技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下：

这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。

1. <html> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
4. <title>表格排序</title> 
5. </head> 
6. <STYLE type=text/css>TABLE { 
7. BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; 
8. BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; 
9. border-spacing: 0px; cell-spacing: 0px 
10. } 
11. TD { 
12. PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; 
13. PADDING-BOTTOM: 2px; PADDING-TOP: 2px;  
14. FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap 
15. } 
16. TH { 
17. PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; 
18. PADDING-BOTTOM: 2px; PADDING-TOP: 2px; 
19. FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap 
20. } 
21. TD.numeric { 
22. TEXT-ALIGN: right 
23. } 
24. TH { 
25. BACKGROUND-COLOR: #c0c0c0 
26. } 
27. TH.mainHeader { 
28. COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left 
29. } 
30. TH A { 
31. COLOR: #000080; TEXT-DECORATION: none 
32. } 
33. TH A:visited { 
34. COLOR: #000080 
35. } 
36. TH A:active { 
37. COLOR: #800000; TEXT-DECORATION: underline 
38. } 
39. TH A:hover { 
40. COLOR: #800000; TEXT-DECORATION: underline 
41. } 
42. TR.alternateRow { 
43. BACKGROUND-COLOR: #e0e0e0 
44. } 
45. TD.sortedColumn { 
46. BACKGROUND-COLOR: #f0f0f0 
47. } 
48. TH.sortedColumn { 
49. BACKGROUND-COLOR: #b0b0b0 
50. } 
51. TR.alternateRow TD.sortedColumn { 
52. BACKGROUND-COLOR: #d0d0d0 
53. } 
54. </STYLE> 
55. <SCRIPT type=text/javascript> 
56. function sortTable(id, col, rev) { 
57. var tblEl = document.getElementById(id); 
58. if (tblEl.reverseSort == null) { 
59. tblEl.reverseSort = new Array(); 
60. tblEl.lastColumn = 1; 
61. } 
62. if (tblEl.reverseSort[col] == null) 
63. tblEl.reverseSort[col] = rev; 
64. if (col == tblEl.lastColumn) 
65. tblEl.reverseSort[col] = !tblEl.reverseSort[col]; 
66. tblEl.lastColumn = col; 
67. var oldDsply = tblEl.style.display; 
68. tblEl.style.display = "none"; 
69. var tmpEl; 
70. var i, j; 
71. var minVal, minIdx; 
72. var testVal; 
73. var cmp; 
74. for (i = 0; i < tblEl.rows.length - 1; i++) { 
75. minIdx = i; 
76. minVal = getTextValue(tblEl.rows[i].cells[col]); 
77. for (j = i + 1; j < tblEl.rows.length; j++) { 
78. testVal = getTextValue(tblEl.rows[j].cells[col]); 
79. cmp = compareValues(minVal, testVal); 
80. if (tblEl.reverseSort[col]) 
81. cmp = -cmp; 
82. if (cmp == 0 && col != 1) 
83. cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]), 
84. getTextValue(tblEl.rows[j].cells[1])); 
85. if (cmp > 0) { 
86. minIdx = j; 
87. minVal = testVal; 
88. } 
89. } 
90. if (minIdx > i) { 
91. tmpEl = tblEl.removeChild(tblEl.rows[minIdx]); 
92. tblEl.insertBefore(tmpEl, tblEl.rows[i]); 
93. } 
94. } 
95. makePretty(tblEl, col); 
96. setRanks(tblEl, col, rev); 
97. tblEl.style.display = oldDsply; 
98. return false; 
99. } 
100. if (document.ELEMENT_NODE == null) { 
101. document.ELEMENT_NODE = 1; 
102. document.TEXT_NODE = 3; 
103. } 
104. function getTextValue(el) { 
105. var i; 
106. var s; 
107. s = ""; 
108. for (i = 0; i < el.childNodes.length; i++) 
109. if (el.childNodes[i].nodeType == document.TEXT_NODE) 
110. s += el.childNodes[i].nodeValue; 
111. else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&  
112. el.childNodes[i].tagName == "BR") 
113. s += " "; 
114. else 
115. // Use recursion to get text within sub-elements. 
116. s += getTextValue(el.childNodes[i]); 
117. return normalizeString(s); 
118. } 
119. function compareValues(v1, v2) { 
120. var f1, f2; 
121. f1 = parseFloat(v1); 
122. f2 = parseFloat(v2); 
123. if (!isNaN(f1) && !isNaN(f2)) { 
124. v1 = f1; 
125. v2 = f2; 
126. } 
127. // Compare the two values. 
128. if (v1 == v2) 
129. return 0; 
130. if (v1 > v2) 
131. return 1 
132. return -1; 
133. } 
134. var whtSpEnds = new RegExp("^//s*|//s*$", "g"); 
135. var whtSpMult = new RegExp("//s//s+", "g"); 
136. function normalizeString(s) { 
137. s = s.replace(whtSpMult, " "); // Collapse any multiple whites space. 
138. s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space. 
139. return s; 
140. } 
141. var rowClsNm = "alternateRow"; 
142. var colClsNm = "sortedColumn"; 
143. var rowTest = new RegExp(rowClsNm, "gi"); 
144. var colTest = new RegExp(colClsNm, "gi"); 
145. function makePretty(tblEl, col) { 
146. var i, j; 
147. var rowEl, cellEl; 
148. for (i = 0; i < tblEl.rows.length; i++) { 
149. rowEl = tblEl.rows[i]; 
150. rowEl.className = rowEl.className.replace(rowTest, ""); 
151. if (i % 2 != 0) 
152. rowEl.className += " " + rowClsNm; 
153. rowEl.className = normalizeString(rowEl.className); 
154. for (j = 2; j < tblEl.rows[i].cells.length; j++) { 
155. cellEl = rowEl.cells[j]; 
156. cellEl.className = cellEl.className.replace(colTest, ""); 
157. if (j == col) 
158. cellEl.className += " " + colClsNm; 
159. cellEl.className = normalizeString(cellEl.className); 
160. } 
161. } 
162. var el = tblEl.parentNode.tHead; 
163. rowEl = el.rows[el.rows.length - 1]; 
164. for (i = 2; i < rowEl.cells.length; i++) { 
165. cellEl = rowEl.cells[i]; 
166. cellEl.className = cellEl.className.replace(colTest, ""); 
167. if (i == col) 
168. cellEl.className += " " + colClsNm; 
169. cellEl.className = normalizeString(cellEl.className); 
170. } 
171. } 
172. function setRanks(tblEl, col, rev) { 
173. var i = 0; 
174. var incr = 1; 
175. if (tblEl.reverseSort[col]) 
176. rev = !rev; 
177. if (rev) { 
178. incr = -1; 
179. i = tblEl.rows.length - 1; 
180. } 
181. var count = 1; 
182. var rank = count; 
183. var curVal; 
184. var lastVal = null; 
185. while (col > 1 && i >= 0 && i < tblEl.rows.length) { 
186. curVal = getTextValue(tblEl.rows[i].cells[col]); 
187. if (lastVal != null && compareValues(curVal, lastVal) != 0) 
188. rank = count; 
189. tblEl.rows[i].rank = rank; 
190. lastVal = curVal; 
191. count++; 
192. i += incr; 
193. } 
194. var rowEl, cellEl; 
195. var lastRank = 0; 
196. for (i = 0; i < tblEl.rows.length; i++) { 
197. rowEl = tblEl.rows[i]; 
198. cellEl = rowEl.cells[0]; 
199. while (cellEl.lastChild != null) 
200. cellEl.removeChild(cellEl.lastChild); 
201. if (col > 1 && rowEl.rank != lastRank) { 
202. cellEl.appendChild(document.createTextNode(rowEl.rank)); 
203. lastRank = rowEl.rank; 
204. } 
205. } 
206. } 
207. </SCRIPT> 
208. </HEAD> 
209. <BODY> 
210. <!-- Offensive statistics table. --> 
211. <TABLE cellSpacing=0 cellPadding=0 border=0> 
212. <THEAD> 
213. <TR> 
214. <TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR> 
215. <TR> 
216. <TH style="TEXT-ALIGN: left">Rank</TH> 
217. <TH style="TEXT-ALIGN: left"><A title="Team Name" 
218. onclick="this.blur(); return sortTable('offTblBdy', 1, false);" 
219. href="#">Team</A></TH> 
220. <TH><SPAN title="Games Played">Gms</SPAN></TH> 
221. <TH><A title="Total Yards" 
222. onclick="this.blur(); return sortTable('offTblBdy', 3, true);" 
223. href="#">Yds</A></TH> 
224. <TH><A title="Yards Per Game" 
225. onclick="this.blur(); return sortTable('offTblBdy', 4, true);" 
226. href="#">Yds/G</A></TH> 
227. <TH><A title="Total Rushing Yards" 
228. onclick="this.blur(); return sortTable('offTblBdy', 5, true);" 
229. href="#">RuYds</A></TH> 
230. <TH><A title="Rushing Yards Per Game" 
231. onclick="this.blur(); return sortTable('offTblBdy', 6, true);" 
232. href="#">RuYds/G</A></TH> 
233. <TH><A title="Total Passing Yards" 
234. onclick="this.blur(); return sortTable('offTblBdy', 7, true);" 
235. href="#">PaYds</A></TH> 
236. <TH><A title="Passing Yards Per Game" 
237. onclick="this.blur(); return sortTable('offTblBdy', 8, true);" 
238. href="#">PaYds/G</A></TH> 
239. <TH><A title="Total Points Scored" 
240. onclick="this.blur(); return sortTable('offTblBdy', 9, true);" 
241. href="#">Pts</A></TH> 
242. <TH><A title="Points Per Game" 
243. onclick="this.blur(); return sortTable('offTblBdy', 10, true);" 
244. href="#">Pts/G</A></TH></TR></THEAD> 
245. <TBODY id=offTblBdy> 
246. <TR> 
247. <TD class=numeric></TD> 
248. <TD>Arizona</TD> 
249. <TD class=numeric>16</TD> 
250. <TD class=numeric>4898</TD> 
251. <TD class=numeric>306.1</TD> 
252. <TD class=numeric>1449</TD> 
253. <TD class=numeric>90.6</TD> 
254. <TD class=numeric>3449</TD> 
255. <TD class=numeric>215.6</TD> 
256. <TD class=numeric>295</TD> 
257. <TD class=numeric>18.4</TD></TR> 
258. <TR class=alternateRow> 
259. <TD class=numeric></TD> 
260. <TD>Atlanta</TD> 
261. <TD class=numeric>16</TD> 
262. <TD class=numeric>5070</TD> 
263. <TD class=numeric>316.9</TD> 
264. <TD class=numeric>1773</TD> 
265. <TD class=numeric>110.8</TD> 
266. <TD class=numeric>3297</TD> 
267.  
268. <TD class=numeric>206.1</TD> 
269. <TD class=numeric>291</TD> 
270. <TD class=numeric>18.2</TD></TR> 
271. <TR> 
272. <TD class=numeric></TD> 
273. <TD>Detroit</TD> 
274. <TD class=numeric>16</TD> 
275. <TD class=numeric>4994</TD> 
276. <TD class=numeric>312.1</TD> 
277. <TD class=numeric>1398</TD> 
278. <TD class=numeric>87.4</TD> 
279. <TD class=numeric>3596</TD> 
280. <TD class=numeric>224.8</TD> 
281. <TD class=numeric>270</TD> 
282. <TD class=numeric>16.9</TD></TR> 
283. <TR class=alternateRow> 
284. <TD class=numeric></TD> 
285. <TD>Jacksonville</TD> 
286. <TD class=numeric>16</TD> 
287. <TD class=numeric>4840</TD> 
288. <TD class=numeric>302.5</TD> 
289. <TD class=numeric>1600</TD> 
290. <TD class=numeric>100.0</TD> 
291. <TD class=numeric>3240</TD> 
292. <TD class=numeric>202.5</TD> 
293. <TD class=numeric>294</TD> 
294. <TD class=numeric>18.4</TD></TR> 
295. <TR> 
296. <TD class=numeric></TD> 
297. <TD>Kansas City</TD> 
298. <TD class=numeric>16</TD> 
299. <TD class=numeric>5673</TD> 
300. <TD class=numeric>354.6</TD> 
301. <TD class=numeric>2008</TD> 
302. <TD class=numeric>125.5</TD> 
303. <TD class=numeric>3665</TD> 
304. <TD class=numeric>229.1</TD> 
305. <TD class=numeric>320</TD> 
306. <TD class=numeric>20.0</TD></TR> 
307. <TR class=alternateRow> 
308. <TD class=numeric></TD> 
309. <TD>Miami</TD> 
310. <TD class=numeric>16</TD> 
311. <TD class=numeric>4821</TD> 
312. <TD class=numeric>301.3</TD> 
313. <TD class=numeric>1664</TD> 
314. <TD class=numeric>104.0</TD> 
315. <TD class=numeric>3157</TD> 
316. <TD class=numeric>197.3</TD> 
317. <TD class=numeric>344</TD> 
318. <TD class=numeric>21.5</TD></TR> 
319. <TR> 
320. <TD class=numeric></TD> 
321. <TD>Minnesota</TD> 
322. <TD class=numeric>16</TD> 
323. <TD class=numeric>5006</TD> 
324. <TD class=numeric>333.7</TD> 
325. <TD class=numeric>1523</TD> 
326. <TD class=numeric>101.5</TD> 
327. <TD class=numeric>3483</TD> 
328. <TD class=numeric>232.2</TD> 
329. <TD class=numeric>287</TD> 
330. <TD class=numeric>19.1</TD></TR> 
331. <TR class=alternateRow> 
332. <TD class=numeric></TD> 
333. <TD>New England</TD> 
334. <TD class=numeric>16</TD> 
335. <TD class=numeric>4882</TD> 
336. <TD class=numeric>305.1</TD> 
337. <TD class=numeric>1793</TD> 
338. <TD class=numeric>112.1</TD> 
339. <TD class=numeric>3089</TD> 
340. <TD class=numeric>193.1</TD> 
341. <TD class=numeric>371</TD> 
342. <TD class=numeric>23.2</TD></TR> 
343. <TR> 
344. <TD class=numeric></TD> 
345. <TD>New Orleans</TD> 
346. <TD class=numeric>16</TD> 
347. <TD class=numeric>5226</TD> 
348. <TD class=numeric>326.6</TD> 
349. <TD class=numeric>1712</TD> 
350. <TD class=numeric>107.0</TD> 
351. <TD class=numeric>3514</TD> 
352. <TD class=numeric>219.6</TD> 
353. <TD class=numeric>333</TD> 
354. <TD class=numeric>20.8</TD></TR> 
355. <TR class=alternateRow> 
356. <TD class=numeric></TD> 
357. <TD>New York Giants</TD> 
358. <TD class=numeric>16</TD> 
359. <TD class=numeric>5335</TD> 
360. <TD class=numeric>333.4</TD> 
361. <TD class=numeric>1777</TD> 
362. <TD class=numeric>111.1</TD> 
363. <TD class=numeric>3558</TD> 
364. <TD class=numeric>222.4</TD> 
365. <TD class=numeric>294</TD> 
366. <TD class=numeric>18.4</TD></TR> 
367. </TBODY></TABLE> 
368. </BODY> 
369. </HTML> 

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