具备排序功能的表格(JS+CSS+table).doc

具备排序功能的表格(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; 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 COLOR: #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-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, 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 first 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 direction.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 style 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 tblEl.rows.length - 1; i+) / Assume the current row has the minimum value.minIdx = i;minVal = getTextValue(tblEl.rowsi.cellscol);/ Search the rows that follow the current one for a smaller value.for (j = i + 1; j 0) minIdx = j;minVal = testVal;/ 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, 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_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);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 = 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 tblEl.rows.length; i+) rowEl = tblEl.rowsi;rowEl.className = rowEl.className.replace(rowTest, );if (i % 2 != 0)rowEl.className += + rowClsNm;rowEl.className = normalizeString(rowEl.className);/ Set style classes on each column (other than the name column) to/ highlight the one that was sorted.for (j = 2; j tblEl.rowsi.cells.length; j+) cellEl = rowEl.cellsj;cellEl.className = cellEl.className.replace(colTest, );if (j = col)cellEl.className += + colClsNm;cellEl.className = normalizeString(cellEl.className);/ Find the table header and highlight the column that was sorted.var el = tblEl.parentNode.tHead;rowEl = el.rowsel.rows.length - 1;/ Set style classes for each column as above.for (i = 2; i 1 & i = 0 & i tblEl.rows.length) / Get the value of the sort column in this row.curVal = getTextValue(tblEl.rowsi.cellscol);/ On rows after the first, compare the sort value of this row to the/ previous one. If they differ, update the rank to match the current row/ count. (If they are the same, this row will get the same rank as the/ previous one.)if (lastVal != null & compareValues(curVal, lastVal) != 0)rank = count;/ Set the rank for this row.tblEl.rowsi.rank = rank;/ Save the sort value of the current row for the next time around and bump/ the row counter and index.lastVal = curVal;count+;i += incr;/ Now go through each row (from top to bottom) and display its rank. Note/ that when two or more rows are tied, the rank is shown on the first of/ those rows only.var rowEl, cellEl;var lastRank = 0;/ Go through the rows from top to bottom.for (i = 0; i 1 & rowEl.rank != lastRank) cellEl.appendChild(document.createTextNode(rowEl.rank);lastRank = rowEl.rank;懒人建站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.4174210