<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><title>具备排序功能的表格(JS+CSS+table)-</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-FAMIL Y: 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-FAMIL Y: 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-DECORA TION: none}TH A:visited {COLOR: #000080}TH A:active {COLOR: #800000; TEXT-DECORA TION: underline}TH A:hover {COLOR: #800000; TEXT-DECORA TION: 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>//-----------------------------------------------------------------------------// 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.stColumn = 1;}// If this column has not been sorted before, set the initial sort direction.if (tblEl.reverseSort[col] == null)tblEl.reverseSort[col] = rev;// If this column was the last one sorted, reverse its sort direction.if (col == stColumn)tblEl.reverseSort[col] = !tblEl.reverseSort[col];// Remember this column as the last one sorted.stColumn = 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.rows[i].cells[col]);// Search the rows that follow the current one for a smaller value.for (j = i + 1; j < tblEl.rows.length; j++) {testVal = getTextValue(tblEl.rows[j].cells[col]);cmp = compareValues(minVal, testVal);// Negate the comparison result if the reverse sort flag is set.if (tblEl.reverseSort[col])cmp = -cmp;// Sort by the second column (team name) if those values are equal.if (cmp == 0 && col != 1)cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]), getTextValue(tblEl.rows[j].cells[1]));// If this row has a smaller value than the current minimum, remember its // position and update the current minimum value.if (cmp > 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.rows[minIdx]);tblEl.insertBefore(tmpEl, tblEl.rows[i]);}}// Make it look pretty.makePretty(tblEl, col);// Set team rankings.setRanks(tblEl, col, rev);// Restore the table's display style.tblEl.style.display = oldDsply;return false;}//-----------------------------------------------------------------------------// Functions to get and compare values during a sort.//-----------------------------------------------------------------------------// This code is necessary for browsers that don't 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.childNodes[i].nodeType == document.TEXT_NODE)s += el.childNodes[i].nodeV alue;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;// If the values are numeric, convert them to floats.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 1return -1;}// Regular expressions for normalizing white space.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;}//-----------------------------------------------------------------------------// 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.rows[i];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.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);}}// Find the table header and highlight the column that was sorted.var el = tblEl.parentNode.tHead;rowEl = el.rows[el.rows.length - 1];// Set style classes for each column as above.for (i = 2; i < rowEl.cells.length; i++) {cellEl = rowEl.cells[i];cellEl.className = cellEl.className.replace(colTest, "");// Highlight the header of the sorted column.if (i == col)cellEl.className += " " + colClsNm;cellEl.className = normalizeString(cellEl.className);}}function setRanks(tblEl, col, rev) {// Determine whether to start at the top row of the table and go down or// at the bottom row and work up. This is based on the current sort// direction of the column and its reversed flag.var i = 0;var incr = 1;if (tblEl.reverseSort[col])rev = !rev;if (rev) {incr = -1;i = tblEl.rows.length - 1;}// Now go through each row in that direction and assign it a rank by// counting 1, 2, 3...var count = 1;var rank = count;var curVal;var lastVal = null;// Note that this loop is skipped if the table was sorted on the name// column.while (col > 1 && i >= 0 && i < tblEl.rows.length) {// Get the value of the sort column in this row.curVal = getTextValue(tblEl.rows[i].cells[col]);// 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(curV al, lastVal) != 0)rank = count;// Set the rank for this row.tblEl.rows[i].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 < tblEl.rows.length; i++) {rowEl = tblEl.rows[i];cellEl = rowEl.cells[0];// Delete anything currently in the rank column.while (stChild != null)cellEl.removeChild(stChild);// If this row's rank is different from the previous one, Insert a new text// node with that rank.if (col > 1 && rowEl.rank != lastRank) {cellEl.appendChild(document.createTextNode(rowEl.rank));lastRank = rowEl.rank;}}}</SCRIPT></HEAD><BODY><P><!-- Offensive statistics table. --><TABLE cellSpacing=0 cellPadding=0 border=0><THEAD><TR><TH class=mainHeader colSpan=11><a href="" target="_blank">懒人建站</a></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="/js/">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="/js/">Yds</A></TH><TH><A title="Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 4, true);"href="/js/">Yds/G</A></TH><TH><A title="Total Rushing Yards"onclick="this.blur(); return sortTable('offTblBdy', 5, true);"href="/js/">RuYds</A></TH><TH><A title="Rushing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 6, true);"href="/js/">RuYds/G</A></TH><TH><A title="Total Passing Yards"onclick="this.blur(); return sortTable('offTblBdy', 7, true);"href="/js/">PaYds</A></TH><TH><A title="Passing Yards Per Game"onclick="this.blur(); return sortTable('offTblBdy', 8, true);"href="/js/">PaYds/G</A></TH><TH><A title="Total Points Scored"onclick="this.blur(); return sortTable('offTblBdy', 9, true);"href="/js/">Pts</A></TH><TH><A title="Points Per Game"onclick="this.blur(); return sortTable('offTblBdy', 10, true);"href="/js/">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>Baltimore</TD><TD class=numeric>16</TD><TD class=numeric>4773</TD><TD class=numeric>318.2</TD><TD class=numeric>1598</TD><TD class=numeric>106.5</TD><TD class=numeric>211.7</TD><TD class=numeric>284</TD><TD class=numeric>18.9</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Buffalo</TD><TD class=numeric>16</TD><TD class=numeric>5137</TD><TD class=numeric>321.1</TD><TD class=numeric>1686</TD><TD class=numeric>105.4</TD><TD class=numeric>3451</TD><TD class=numeric>215.7</TD><TD class=numeric>265</TD><TD class=numeric>16.6</TD></TR> <TR><TD class=numeric></TD><TD>Carolina</TD><TD class=numeric>16</TD><TD class=numeric>4254</TD><TD class=numeric>265.9</TD><TD class=numeric>1372</TD><TD class=numeric>85.8</TD><TD class=numeric>2882</TD><TD class=numeric>180.1</TD><TD class=numeric>253</TD><TD class=numeric>15.8</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Chicago</TD><TD class=numeric>16</TD><TD class=numeric>4694</TD><TD class=numeric>293.4</TD><TD class=numeric>1742</TD><TD class=numeric>108.9</TD><TD class=numeric>2952</TD><TD class=numeric>184.5</TD><TD class=numeric>338</TD><TD class=numeric>21.1</TD></TR> <TR><TD class=numeric></TD><TD>Cincinnati</TD><TD class=numeric>16</TD><TD class=numeric>300.0</TD><TD class=numeric>1712</TD><TD class=numeric>107.0</TD><TD class=numeric>3088</TD><TD class=numeric>193.0</TD><TD class=numeric>226</TD><TD class=numeric>14.1</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Cleveland</TD><TD class=numeric>16</TD><TD class=numeric>4152</TD><TD class=numeric>259.5</TD><TD class=numeric>1351</TD><TD class=numeric>84.4</TD><TD class=numeric>2801</TD><TD class=numeric>175.1</TD><TD class=numeric>285</TD><TD class=numeric>17.8</TD></TR> <TR><TD class=numeric></TD><TD>Dallas</TD><TD class=numeric>16</TD><TD class=numeric>4402</TD><TD class=numeric>275.1</TD><TD class=numeric>2184</TD><TD class=numeric>136.5</TD><TD class=numeric>2218</TD><TD class=numeric>138.6</TD><TD class=numeric>246</TD><TD class=numeric>15.4</TD></TR> <TR class=alternateRow><TD class=numeric></TD><TD>Denver</TD><TD class=numeric>16</TD><TD class=numeric>4817</TD><TD class=numeric>301.1</TD><TD class=numeric>1877</TD><TD class=numeric>117.3</TD><TD class=numeric>2940</TD><TD class=numeric>183.8</TD><TD class=numeric>340</TD><TD class=numeric>21.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>Green Bay</TD><TD class=numeric>16</TD><TD class=numeric>5463</TD><TD class=numeric>341.4</TD><TD class=numeric>1693</TD><TD class=numeric>105.8</TD><TD class=numeric>3770</TD><TD class=numeric>235.6</TD><TD class=numeric>390</TD><TD class=numeric>24.4</TD></TR> <TR><TD class=numeric></TD><TD>Indianapolis</TD><TD class=numeric>16</TD><TD class=numeric>5955</TD><TD class=numeric>372.2</TD><TD class=numeric>1966</TD><TD class=numeric>122.9</TD><TD class=numeric>3989</TD><TD class=numeric>249.3</TD><TD class=numeric>413</TD><TD class=numeric>25.8</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>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>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>文章来源：季长旭博客鹿胎膏。