教程集 > jQuery > jquery 教程 > 正文点击表格进行排序

点击表格进行排序

发布时间：2023-12-23 编辑：jiaochengji.com

教程集为您提供点击表格进行排序等资源，欢迎您收藏本站，我们将为您提供最新的点击表格进行排序资源

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

<link   href="http://www.brainjar.com/common/default.css" type=text/css rel=stylesheet>  <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>  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("\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(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>  <p>  <table cellspacing=0 cellpadding=0 border=0>    <thead>    <tr>      <th class=mainHeader colspan=11>NFL 2001 Defensive 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=defTblBdy>    <tr class="">      <td class=numeric></td>      <td class="">Arizona</td>      <td class=numeric>16</td>      <td class=numeric>5685</td>      <td class=numeric>355.3</td>      <td class=numeric>2087</td>      <td class=numeric>130.4</td>      <td class=numeric>3598</td>      <td class=numeric>224.9</td>      <td class=numeric>343</td>      <td class=numeric>21.4</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Atlanta</td>      <td class=numeric>16</td>      <td class=numeric>5845</td>      <td class=numeric>365.3</td>      <td class=numeric>1943</td>      <td class=numeric>121.4</td>      <td class=numeric>3902</td>      <td class=numeric>243.9</td>      <td class=numeric>377</td>      <td class=numeric>23.6</td></tr>    <tr class="">      <td class=numeric></td>      <td class="">Baltimore</td>      <td class=numeric>16</td>      <td class=numeric>4267</td>      <td class=numeric>284.5</td>      <td class=numeric>1325</td>      <td class=numeric>88.3</td>      <td class=numeric>2942</td>      <td class=numeric>196.1</td>      <td class=numeric>262</td>      <td class=numeric>17.5</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Buffalo</td>      <td class=numeric>16</td>      <td class=numeric>5292</td>      <td class=numeric>330.8</td>      <td class=numeric>2133</td>      <td class=numeric>133.3</td>      <td class=numeric>3159</td>      <td class=numeric>197.4</td>      <td class=numeric>420</td>      <td class=numeric>26.2</td></tr>    <tr>      <td class=numeric></td>      <td class="">Carolina</td>      <td class=numeric>16</td>      <td class=numeric>5943</td>      <td class=numeric>371.4</td>      <td class=numeric>2301</td>      <td class=numeric>143.8</td>      <td class=numeric>3642</td>      <td class=numeric>227.6</td>      <td class=numeric>410</td>      <td class=numeric>25.6</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Chicago</td>      <td class=numeric>16</td>      <td class=numeric>4978</td>      <td class=numeric>311.1</td>      <td class=numeric>1313</td>      <td class=numeric>82.1</td>      <td class=numeric>3665</td>      <td class=numeric>229.1</td>      <td class=numeric>203</td>      <td class=numeric>12.7</td></tr>    <tr>      <td class=numeric></td>      <td class="">Cincinnati</td>      <td class=numeric>16</td>      <td class=numeric>4832</td>      <td class=numeric>302.0</td>      <td class=numeric>1675</td>      <td class=numeric>104.7</td>      <td class=numeric>3157</td>      <td class=numeric>197.3</td>      <td class=numeric>309</td>      <td class=numeric>19.3</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Cleveland</td>      <td class=numeric>16</td>      <td class=numeric>5297</td>      <td class=numeric>331.1</td>      <td class=numeric>2208</td>      <td class=numeric>138.0</td>      <td class=numeric>3089</td>      <td class=numeric>193.1</td>      <td class=numeric>319</td>      <td class=numeric>19.9</td></tr>    <tr>      <td class=numeric></td>      <td class="">Dallas</td>      <td class=numeric>16</td>      <td class=numeric>4599</td>      <td class=numeric>287.4</td>      <td class=numeric>1710</td>      <td class=numeric>106.9</td>      <td class=numeric>2889</td>      <td class=numeric>180.6</td>      <td class=numeric>338</td>      <td class=numeric>21.1</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Denver</td>      <td class=numeric>16</td>      <td class=numeric>4774</td>      <td class=numeric>298.4</td>      <td class=numeric>1492</td>      <td class=numeric>93.2</td>      <td class=numeric>3282</td>      <td class=numeric>205.1</td>      <td class=numeric>339</td>      <td class=numeric>21.2</td></tr>    <tr>      <td class=numeric></td>      <td class="">Detroit</td>      <td class=numeric>16</td>      <td class=numeric>5521</td>      <td class=numeric>345.1</td>      <td class=numeric>1993</td>      <td class=numeric>124.6</td>      <td class=numeric>3528</td>      <td class=numeric>220.5</td>      <td class=numeric>424</td>      <td class=numeric>26.5</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Green Bay</td>      <td class=numeric>16</td>      <td class=numeric>4937</td>      <td class=numeric>308.6</td>      <td class=numeric>1769</td>      <td class=numeric>110.6</td>      <td class=numeric>3168</td>      <td class=numeric>198.0</td>      <td class=numeric>266</td>      <td class=numeric>16.6</td></tr>    <tr>      <td class=numeric></td>      <td class="">Indianapolis</td>      <td class=numeric>16</td>      <td class=numeric>5715</td>      <td class=numeric>357.2</td>      <td class=numeric>2115</td>      <td class=numeric>132.2</td>      <td class=numeric>3600</td>      <td class=numeric>225.0</td>      <td class=numeric>486</td>      <td class=numeric>30.4</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Jacksonville</td>      <td class=numeric>16</td>      <td class=numeric>5070</td>      <td class=numeric>316.9</td>      <td class=numeric>1611</td>      <td class=numeric>100.7</td>      <td class=numeric>3459</td>      <td class=numeric>216.2</td>      <td class=numeric>286</td>      <td class=numeric>17.9</td></tr>    <tr>      <td class=numeric></td>      <td class="">Kansas City</td>      <td class=numeric>16</td>      <td class=numeric>5304</td>      <td class=numeric>331.5</td>      <td class=numeric>2140</td>      <td class=numeric>133.8</td>      <td class=numeric>3164</td>      <td class=numeric>197.8</td>      <td class=numeric>344</td>      <td class=numeric>21.5</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">Miami</td>      <td class=numeric>16</td>      <td class=numeric>4608</td>      <td class=numeric>288.0</td>      <td class=numeric>1779</td>      <td class=numeric>111.2</td>      <td class=numeric>2829</td>      <td class=numeric>176.8</td>      <td class=numeric>290</td>      <td class=numeric>18.1</td></tr>    <tr>      <td class=numeric></td>      <td class="">Minnesota</td>      <td class=numeric>16</td>      <td class=numeric>5315</td>      <td class=numeric>354.3</td>      <td class=numeric>2087</td>      <td class=numeric>139.1</td>      <td class=numeric>3228</td>      <td class=numeric>215.2</td>      <td class=numeric>371</td>      <td class=numeric>24.7</td></tr>    <tr class=alternateRow>      <td class=numeric></td>      <td class="">New England</td>      <td class=numeric>16</td>      <td class=numeric>5352</td>      <td class=numeric>334.5</td>      <td class=numeric>1855</td>      <td class=numeric>115.9</td>      <td class=numeric>3497</td>      <td class=numeric>218.6</td>      <td class=numeric>272</td>      <td class=numeric>17.0</td></tr>    <tr>      <td class=numeric></td>      <td class="">New Orleans</td>      <td class=numeric>16</td>      <td class=numeric>5070</td>      <td class=numeric>316.9</td>      <td class=numeric>1715</td>      <td class=numeric>107.2</td>      <td class=numeric>3355</td>      <td class=numeric>209.7</td>      <td class=numeric>409</td>      <td class=numeric>25.6</td></tr>  </tbody></table>  </p>

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

您可能感兴趣的文章：
jQuery表格排序插件 tablesorter
基于jQuery的表格操作插件
 JQuery 构建客户/服务分离的链接模型中Table中的排序分析
 javascript 表格排序方法
 javascript排序算法代码解析
 jQuery入门-使用tablesorter插件(表格排序)
Javascript实现表格排序实例代码
 jQuery 选择表格(table)里的行和列及改变简单样式
 jQuery表格插件 DataTables
Jquery 选中表格一列并对表格排序实现原理

上一篇：文本框获得焦点时如何改变背景色

[关闭]

最近更新

浏览排行

~ ~