首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:19:56
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了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程序设计有所帮助。

上一篇：最精简的JavaScript实现鼠标拖动效果的方法

下一篇：js实现div层缓慢收缩与展开的方法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有