本文实例讲述了JavaScript实现表格点击排序的方法。分享给大家供大家参考。具体分析如下：
这里实现基于JS的表格点击排序效果，可以根据表格内的数据大小自动按顺序排列，股票网站常会见到这种功能。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表格排序</title></head><STYLE type=text/css>TABLE { BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px}TD { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px;FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap}TH { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap}TD.numeric { TEXT-ALIGN: right}TH { BACKGROUND-COLOR: #c0c0c0}TH.mainHeader { COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left}TH A { COLOR: #000080; TEXT-DECORATION: none}TH A:visited { COLOR: #000080}TH A:active { COLOR: #800000; TEXT-DECORATION: underline}TH A:hover { COLOR: #800000; TEXT-DECORATION: underline}TR.alternateRow { BACKGROUND-COLOR: #e0e0e0}TD.sortedColumn { BACKGROUND-COLOR: #f0f0f0}TH.sortedColumn { BACKGROUND-COLOR: #b0b0b0}TR.alternateRow TD.sortedColumn { BACKGROUND-COLOR: #d0d0d0}</STYLE><SCRIPT type=text/javascript>function sortTable（id, col, rev） { var tblEl = document.getElementById（id）; if （tblEl.reverseSort == null） {tblEl.reverseSort = new Array（）;tblEl.lastColumn = 1; } if （tblEl.reverseSort[col] == null）tblEl.reverseSort[col] = rev; if （col == tblEl.lastColumn）tblEl.reverseSort[col] = ！tblEl.reverseSort[col]; tblEl.lastColumn = col; var oldDsply = tblEl.style.display; tblEl.style.display = "none"; var tmpEl; var i, j; var minVal, minIdx; var testVal; var cmp; for （i = 0; i < tblEl.rows.length - 1; i++） {minIdx = i;minVal = getTextValue（tblEl.rows[i].cells[col]）;for （j = i + 1; j < tblEl.rows.length; j++） { testVal = getTextValue（tblEl.rows[j].cells[col]）; cmp = compareValues（minVal, testVal）; if （tblEl.reverseSort[col]）cmp = -cmp; if （cmp == 0 && col ！= 1）cmp = compareValues（getTextValue（tblEl.rows[minIdx].cells[1]）,getTextValue（tblEl.rows[j].cells[1]））; if （cmp > 0） {minIdx = j;minVal = testVal; }}if （minIdx > i） { tmpEl = tblEl.removeChild（tblEl.rows[minIdx]）; tblEl.insertBefore（tmpEl, tblEl.rows[i]）;} } makePretty（tblEl, col）; setRanks（tblEl, col, rev）; tblEl.style.display = oldDsply; return false;}if （document.ELEMENT_NODE == null） { document.ELEMENT_NODE = 1; document.TEXT_NODE = 3;}function getTextValue（el） { var i; var s; s = ""; for （i = 0; i < el.childNodes.length; i++）if （el.childNodes[i].nodeType == document.TEXT_NODE） s += el.childNodes[i].nodeValue;else if （el.childNodes[i].nodeType == document.ELEMENT_NODE &&el.childNodes[i].tagName == "BR"） s += " ";else // Use recursion to get text within sub-elements. s += getTextValue（el.childNodes[i]）; return normalizeString（s）;}function compareValues（v1, v2） { var f1, f2; f1 = parseFloat（v1）; f2 = parseFloat（v2）; if （！isNaN（f1） && ！isNaN（f2）） {v1 = f1;v2 = f2; } // Compare the two values. if （v1 == v2）return 0; if （v1 > v2）return 1 return -1;}var whtSpEnds = new RegExp（"^\s*|\s*$", "g"）;var whtSpMult = new RegExp（"\s\s+", "g"）;function normalizeString（s） { s = s.replace（whtSpMult, " "）; // Collapse any multiple whites space. s = s.replace（whtSpEnds, ""）;// Remove leading or trailing white space. return s;}var rowClsNm = "alternateRow";var colClsNm = "sortedColumn";var rowTest = new RegExp（rowClsNm, "gi"）;var colTest = new RegExp（colClsNm, "gi"）;function makePretty（tblEl, col） { var i, j; var rowEl, cellEl; for （i = 0; i < tblEl.rows.length; i++） {rowEl = tblEl.rows[i];rowEl.className = rowEl.className.replace（rowTest, ""）;if （i % 2 ！= 0） rowEl.className += " " + rowClsNm;rowEl.className = normalizeString（rowEl.className）;for （j = 2; j < tblEl.rows[i].cells.length; j++） { cellEl = rowEl.cells[j]; cellEl.className = cellEl.className.replace（colTest, ""）; if （j == col）cellEl.className += " " + colClsNm; cellEl.className = normalizeString（cellEl.className）;} } var el = tblEl.parentNode.tHead; rowEl = el.rows[el.rows.length - 1]; for （i = 2; i < rowEl.cells.length; i++） {cellEl = rowEl.cells[i];cellEl.className = cellEl.className.replace（colTest, ""）;if （i == col） cellEl.className += " " + colClsNm; cellEl.className = normalizeString（cellEl.className）; }}function setRanks（tblEl, col, rev） { var i= 0; var incr = 1; if （tblEl.reverseSort[col]）rev = ！rev; if （rev） {incr = -1;i = tblEl.rows.length - 1; } var count= 1; var rank= count; var curVal; var lastVal = null; while （col > 1 && i >= 0 && i < tblEl.rows.length） {curVal = getTextValue（tblEl.rows[i].cells[col]）;if （lastVal ！= null && compareValues（curVal, lastVal） ！= 0）rank = count;tblEl.rows[i].rank = rank;lastVal = curVal;count++;i += incr; } var rowEl, cellEl; var lastRank = 0; for （i = 0; i < tblEl.rows.length; i++） {rowEl = tblEl.rows[i];cellEl = rowEl.cells[0];while （cellEl.lastChild ！= null） cellEl.removeChild（cellEl.lastChild）;if （col > 1 && rowEl.rank ！= lastRank） { cellEl.appendChild（document.createTextNode（rowEl.rank））; lastRank = rowEl.rank;} }}</SCRIPT></HEAD><BODY><！-- Offensive statistics table. --><TABLE cellSpacing=0 cellPadding=0 border=0> <THEAD> <TR><TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR> <TR><TH style="TEXT-ALIGN: left">Rank</TH><TH style="TEXT-ALIGN: left"><A title="Team Name"onclick="this.blur（）; return sortTable（"offTblBdy", 1, false）;"href="#">Team</A></TH><TH><SPAN title="Games Played">Gms</SPAN></TH><TH><A title="Total Yards"onclick="this.blur（）; return sortTable（"offTblBdy", 3, true）;"href="#">Yds</A></TH><TH><A title="Yards Per Game"onclick="this.blur（）; return sortTable（"offTblBdy", 4, true）;"href="#">Yds/G</A></TH><TH><A title="Total Rushing Yards"onclick="this.blur（）; return sortTable（"offTblBdy", 5, true）;"href="#">RuYds</A></TH><TH><A title="Rushing Yards Per Game"onclick="this.blur（）; return sortTable（"offTblBdy", 6, true）;"href="#">RuYds/G</A></TH><TH><A title="Total Passing Yards"onclick="this.blur（）; return sortTable（"offTblBdy", 7, true）;"href="#">PaYds</A></TH><TH><A title="Passing Yards Per Game"onclick="this.blur（）; return sortTable（"offTblBdy", 8, true）;"href="#">PaYds/G</A></TH><TH><A title="Total Points Scored"onclick="this.blur（）; return sortTable（"offTblBdy", 9, true）;"href="#">Pts</A></TH><TH><A title="Points Per Game"onclick="this.blur（）; return sortTable（"offTblBdy", 10, true）;"href="#">Pts/G</A></TH></TR></THEAD> <TBODY id=offTblBdy> <TR><TD class=numeric></TD><TD>Arizona</TD><TD class=numeric>16</TD><TD class=numeric>4898</TD><TD class=numeric>306.1</TD><TD class=numeric>1449</TD><TD class=numeric>90.6</TD><TD class=numeric>3449</TD><TD class=numeric>215.6</TD><TD class=numeric>295</TD><TD class=numeric>18.4</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Atlanta</TD><TD class=numeric>16</TD><TD class=numeric>5070</TD><TD class=numeric>316.9</TD><TD class=numeric>1773</TD><TD class=numeric>110.8</TD><TD class=numeric>3297</TD><TD class=numeric>206.1</TD><TD class=numeric>291</TD><TD class=numeric>18.2</TD></TR><TR><TD class=numeric></TD><TD>Detroit</TD><TD class=numeric>16</TD><TD class=numeric>4994</TD><TD class=numeric>312.1</TD><TD class=numeric>1398</TD><TD class=numeric>87.4</TD><TD class=numeric>3596</TD><TD class=numeric>224.8</TD><TD class=numeric>270</TD><TD class=numeric>16.9</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Jacksonville</TD><TD class=numeric>16</TD><TD class=numeric>4840</TD><TD class=numeric>302.5</TD><TD class=numeric>1600</TD><TD class=numeric>100.0</TD><TD class=numeric>3240</TD><TD class=numeric>202.5</TD><TD class=numeric>294</TD><TD class=numeric>18.4</TD></TR> <TR><TD class=numeric></TD><TD>Kansas City</TD><TD class=numeric>16</TD><TD class=numeric>5673</TD><TD class=numeric>354.6</TD><TD class=numeric>2008</TD><TD class=numeric>125.5</TD><TD class=numeric>3665</TD><TD class=numeric>229.1</TD><TD class=numeric>320</TD><TD class=numeric>20.0</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Miami</TD><TD class=numeric>16</TD><TD class=numeric>4821</TD><TD class=numeric>301.3</TD><TD class=numeric>1664</TD><TD class=numeric>104.0</TD><TD class=numeric>3157</TD><TD class=numeric>197.3</TD><TD class=numeric>344</TD><TD class=numeric>21.5</TD></TR> <TR><TD class=numeric></TD><TD>Minnesota</TD><TD class=numeric>16</TD><TD class=numeric>5006</TD><TD class=numeric>333.7</TD><TD class=numeric>1523</TD><TD class=numeric>101.5</TD><TD class=numeric>3483</TD><TD class=numeric>232.2</TD><TD class=numeric>287</TD><TD class=numeric>19.1</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>New England</TD><TD class=numeric>16</TD><TD class=numeric>4882</TD><TD class=numeric>305.1</TD><TD class=numeric>1793</TD><TD class=numeric>112.1</TD><TD class=numeric>3089</TD><TD class=numeric>193.1</TD><TD class=numeric>371</TD><TD class=numeric>23.2</TD></TR> <TR><TD class=numeric></TD><TD>New Orleans</TD><TD class=numeric>16</TD><TD class=numeric>5226</TD><TD class=numeric>326.6</TD><TD class=numeric>1712</TD><TD class=numeric>107.0</TD><TD class=numeric>3514</TD><TD class=numeric>219.6</TD><TD class=numeric>333</TD><TD class=numeric>20.8</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>New York Giants</TD><TD class=numeric>16</TD><TD class=numeric>5335</TD><TD class=numeric>333.4</TD><TD class=numeric>1777</TD><TD class=numeric>111.1</TD><TD class=numeric>3558</TD><TD class=numeric>222.4</TD><TD class=numeric>294</TD><TD class=numeric>18.4</TD></TR></TBODY></TABLE></BODY></HTML>希望本文所述对大家的javascript程序设计有所帮助。
易网时代-编程资源站