1、具备排序功能的表格 (JS+CSS+table)-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: 0pxTD PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px;
2、 FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrapTH 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: nowrapTD.numeric TEXT-ALIGN: rightTH BACKGROUND-COLOR: #c0c0c0TH.mainHeader COL
3、OR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: leftTH A COLOR: #000080; TEXT-DECORATION: noneTH A:visited COLOR: #000080TH A:active COLOR: #800000; TEXT-DECORATION: underlineTH A:hover COLOR: #800000; TEXT-DECORATION: underlineTR.alternateRow BACKGROUND-COLOR: #e0e0e0TD.sortedColumn BACKGROUND-
4、COLOR: #f0f0f0TH.sortedColumn BACKGROUND-COLOR: #b0b0b0TR.alternateRow TD.sortedColumn BACKGROUND-COLOR: #d0d0d0/-/ sortTable(id, col, rev)/ id - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted./ col - Index of the column to sort, 0 = first column, 1 = second column,/ etc./ rev - If true
5、, the column is sorted in reverse (descending) order/ initially./ Note: the team name column (index 1) is used as a secondary sort column and/ always sorted in ascending order./-function sortTable(id, col, rev) / Get the table or table section to sort.var tblEl = document.getElementById(id);/ The fi
6、rst time this function is called for a given table, set up an/ array of reverse sort flags.if (tblEl.reverseSort = null) tblEl.reverseSort = new Array();/ Also, assume the team name column is initially sorted.tblEl.lastColumn = 1;/ If this column has not been sorted before, set the initial sort dire
7、ction.if (tblEl.reverseSortcol = null)tblEl.reverseSortcol = rev;/ If this column was the last one sorted, reverse its sort direction.if (col = tblEl.lastColumn)tblEl.reverseSortcol = !tblEl.reverseSortcol;/ Remember this column as the last one sorted.tblEl.lastColumn = col;/ Set the table display s
8、tyle to “none“ - necessary for Netscape 6/ browsers.var oldDsply = tblEl.style.display;tblEl.style.display = “none“;/ Sort the rows based on the content of the specified column using a/ selection sort.var tmpEl;var i, j;var minVal, minIdx;var testVal;var cmp;for (i = 0; i 0) minIdx = j;minVal = test
9、Val;/ By now, we have the row with the smallest value. Remove it from the/ table and insert it before the current row.if (minIdx i) tmpEl = tblEl.removeChild(tblEl.rowsminIdx);tblEl.insertBefore(tmpEl, tblEl.rowsi);/ Make it look pretty.makePretty(tblEl, col);/ Set team rankings.setRanks(tblEl, col,
10、 rev);/ Restore the tables display style.tblEl.style.display = oldDsply;return false;/-/ Functions to get and compare values during a sort./-/ This code is necessary for browsers that dont reflect the DOM constants/ (like IE).if (document.ELEMENT_NODE = null) document.ELEMENT_NODE = 1;document.TEXT_
11、NODE = 3;function getTextValue(el) var i;var s;/ Find and concatenate the values of all text nodes contained within the/ element.s = “;for (i = 0; i v2)return 1return -1;/ Regular expressions for normalizing white space.var whtSpEnds = new RegExp(“s*|s*$“, “g“);var whtSpMult = new RegExp(“ss+“, “g“)
12、;function normalizeString(s) s = s.replace(whtSpMult, “ “); / Collapse any multiple whites space.s = s.replace(whtSpEnds, “); / Remove leading or trailing white space.return s;/-/ Functions to update the table appearance after a sort./-/ Style class names.var rowClsNm = “alternateRow“;var colClsNm =
13、 “sortedColumn“;/ Regular expressions for setting class names.var rowTest = new RegExp(rowClsNm, “gi“);var colTest = new RegExp(colClsNm, “gi“);function makePretty(tblEl, col) var i, j;var rowEl, cellEl;/ Set style classes on each row to alternate their appearance.for (i = 0; i 1 lastRank = rowEl.ra
14、nk;懒人建站RankTeamGmsYdsYds/GRuYdsRuYds/GPaYdsPaYds/GPtsPts/GArizona164898306.1144990.63449215.629518.4Atlanta165070316.91773110.83297206.129118.2Baltimore164773318.21598106.53175211.728418.9Buffalo165137321.11686105.43451215.726516.6Carolina164254265.9137285.82882180.125315.8Chicago164694293.41742108.
15、92952184.533821.1Cincinnati164800300.01712107.03088193.022614.1Cleveland164152259.5135184.42801175.128517.8Dallas164402275.12184136.52218138.624615.4Denver164817301.11877117.32940183.834021.2Detroit164994312.1139887.43596224.827016.9Green Bay165463341.41693105.83770235.639024.4Indianapolis165955372.
16、21966122.93989249.341325.8Jacksonville164840302.51600100.03240202.529418.4Kansas City165673354.62008125.53665229.132020.0Miami164821301.31664104.03157197.334421.5Minnesota165006333.71523101.53483232.228719.1New England164882305.11793112.13089193.137123.2New orleans165226326.61712107.03514219.633320.8New York Giants165335333.41777111.13558222.429418.4文章来源： 季长旭博客 鹿胎膏
