教程集 > 脚本编程 > javascript > 正文非常不错的表格排序

非常不错的表格排序

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供非常不错的表格排序等资源，欢迎您收藏本站，我们将为您提供最新的非常不错的表格排序资源

提示：您可以先修改部分代码再运行

<html>  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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>  //----------------------------------------------------------------------------- // 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.reverseSort[col] == null)     tblEl.reverseSort[col] = rev;    // If this column was the last one sorted, reverse its sort direction.   if (col == tblEl.lastColumn)     tblEl.reverseSort[col] = !tblEl.reverseSort[col];    // 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.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].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;    // 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 1   return -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.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(curVal, 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 (cellEl.lastChild != null)       cellEl.removeChild(cellEl.lastChild);     // 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>  <meta content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD> <body> <p> <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">Team</th>     <th><span title="Games Played">Gms</span></th>     <th>Yds</th>     <th>Yds/G</th>     <th>RuYds</th>     <th>RuYds/G</th>     <th>PaYds</th>     <th>PaYds/G</th>     <th>Pts</th>     <th>Pts/G</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>3175</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>4800</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>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>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript排序算法代码解析
 基于jQuery的表格操作插件
 jQuery 表格插件整理
 PostgreSQL从菜鸟到专家系列教程(4)第二章关系数据库原理
 PHP与MYSQL中UTF8 中文排序例子
 2010年最佳jQuery插件整理
 php数组排序方法大全(脚本学堂整理奉献)
Google排名技巧
 php array数组的相关处理函数and str字符串处理与正则表达式
 php中static,const与define的区别分析

上一篇：VML制作的用字母实现的圆脚边框下一篇：Window Media Player 播放器

[关闭]

非常不错的表格排序

最近更新

浏览排行