0顶

不错的表格排序

稿源：互联网 2022-07-16 04:41:14 点击： 788 撤稿纠错

很不错的表格排序效果，可顺排或者倒排。

以下讨论的是和相关的不错的表格排序教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>非常不错的表格排序，sky整理收集，站长特效欢迎您。</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>
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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//-----------------------------------------------------------------------------
// 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);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//-----------------------------------------------------------------------------
// 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);
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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;
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  // 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;
    }
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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"><A title="Team Name"
      onclick="this.blur(); return sortTable('offTblBdy', 1, false);"
      href="#">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="#">Yds</A></TH>
    <TH><A title="Yards Per Game"
      onclick="this.blur(); return sortTable('offTblBdy',  4, true);"
      href="#">Yds/G</A></TH>
    <TH><A title="Total Rushing Yards"
      onclick="this.blur(); return sortTable('offTblBdy',  5, true);"
      href="#">RuYds</A></TH>
    <TH><A title="Rushing Yards Per Game"
      onclick="this.blur(); return sortTable('offTblBdy',  6, true);"
      href="#">RuYds/G</A></TH>
    <TH><A title="Total Passing Yards"
      onclick="this.blur(); return sortTable('offTblBdy',  7, true);"
      href="#">PaYds</A></TH>
    <TH><A title="Passing Yards Per Game"
      onclick="this.blur(); return sortTable('offTblBdy',  8, true);"
      href="#">PaYds/G</A></TH>
    <TH><A title="Total Points Scored"
      onclick="this.blur(); return sortTable('offTblBdy',  9, true);"
      href="#">Pts</A></TH>
    <TH><A title="Points Per Game"
      onclick="this.blur(); return sortTable('offTblBdy', 10, true);"
      href="#">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>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>

关于不错的表格排序的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016386763239.shtml方便下次再访问哦。

·上一篇： js获取鼠标所在位置对象
·下一篇： 改变单元格背景颜色效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

不错的表格排序

文章分类LIST >>返回首页

最新游戏

最新新闻