《具备排序功能的表格(JS+CSS+table).doc》由会员分享，可在线阅读，更多相关《具备排序功能的表格(JS+CSS+table).doc（14页珍藏版）》请在金锄头文库上搜索。
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 COLO
3、R: #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-C
4、OLOR: #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 fir
6、st 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 direc
7、tion.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 st
8、yle 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+) / Ass
9、ume 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
10、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;/-/ Fun
11、ctions 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 el.childNodes.length; i+)if (el.childNodesi.nodeType = document.TEXT_NODE)s += el.childNodesi.nodeValue;else if (el.childNodesi.nodeType = docume
