Js表格排序美化版

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 色彩表格 -> Js表格排序美化版

Js表格排序美化版

作者:admin 发布时间:2010-8-9 1:32:03 发布人: admin

<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">
function sortTable(id, col, rev) {
  var tblEl = document.getElementById(id);
  if (tblEl.reverseSort == null) {
    tblEl.reverseSort = new Array();
    tblEl.lastColumn = 1;
  }
  if (tblEl.reverseSort[col] == null)
    tblEl.reverseSort[col] = rev;
  if (col == tblEl.lastColumn)
    tblEl.reverseSort[col] = !tblEl.reverseSort[col];
  tblEl.lastColumn = col;
  var oldDsply = tblEl.style.display;
  tblEl.style.display = "none";
  var tmpEl;
  var i, j;
  var minVal, minIdx;
  var testVal;
  var cmp;
  for (i = 0; i < tblEl.rows.length - 1; i++) {
    minIdx = i;
    minVal = getTextValue(tblEl.rows[i].cells[col]);
    for (j = i + 1; j < tblEl.rows.length; j++) {
      testVal = getTextValue(tblEl.rows[j].cells[col]);
      cmp = compareValues(minVal, testVal);
      if (tblEl.reverseSort[col])
        cmp = -cmp;
      if (cmp == 0  &&  col != 1)
        cmp = compareValues(getTextValue(tblEl.rows[minIdx].cells[1]),
                            getTextValue(tblEl.rows[j].cells[1]));
      if (cmp > 0) {
        minIdx = j;
        minVal = testVal;
      }
    }
    if (minIdx > i) {
      tmpEl = tblEl.removeChild(tblEl.rows[minIdx]);
      tblEl.insertBefore(tmpEl, tblEl.rows[i]);
    }
  }
  makePretty(tblEl, col);
  setRanks(tblEl, col, rev);
  tblEl.style.display = oldDsply;
  return false;
}
if (document.ELEMENT_NODE == null) {
  document.ELEMENT_NODE = 1;
  document.TEXT_NODE = 3;
}
function getTextValue(el) {
  var i;
  var s;
  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
      s += getTextValue(el.childNodes[i]);
  return normalizeString(s);
}
function compareValues(v1, v2) {
  var f1, f2;
  f1 = parseFloat(v1);
  f2 = parseFloat(v2);
  if (!isNaN(f1)  &&  !isNaN(f2)) {
    v1 = f1;
    v2 = f2;
  }
  if (v1 == v2)
    return 0;
  if (v1 > v2)
    return 1
  return -1;
}
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;
}
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
  var i, j;
  var rowEl, cellEl;
  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);
    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);
    }
  }
  var el = tblEl.parentNode.tHead;
  rowEl = el.rows[el.rows.length - 1];
  for (i = 2; i < rowEl.cells.length; i++) {
    cellEl = rowEl.cells[i];
    cellEl.className = cellEl.className.replace(colTest, "");
    if (i == col)
      cellEl.className += " " + colClsNm;
      cellEl.className = normalizeString(cellEl.className);
  }
}
function setRanks(tblEl, col, rev) {
  var i    = 0;
  var incr = 1;
  if (tblEl.reverseSort[col])
    rev = !rev;
  if (rev) {
    incr = -1;
    i = tblEl.rows.length - 1;
  }
  var count   = 1;
  var rank    = count;
  var curVal;
  var lastVal = null;
  while (col > 1  &&  i >= 0  &&  i < tblEl.rows.length) {
    curVal = getTextValue(tblEl.rows[i].cells[col]);
    if (lastVal != null  &&  compareValues(curVal, lastVal) != 0)
        rank = count;
    tblEl.rows[i].rank = rank;
    lastVal = curVal;
    count++;
    i += incr;
  }
  var rowEl, cellEl;
  var lastRank = 0;
  for (i = 0; i < tblEl.rows.length; i++) {
    rowEl = tblEl.rows[i];
    cellEl = rowEl.cells[0];
    while (cellEl.lastChild != null)
      cellEl.removeChild(cellEl.lastChild);
    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>

<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 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>
    <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>
</tbody></table>
</body></html>

很不错的表格排序，点击表头的每列，都会按照一定的规则进行排序，您需要做的就是设置这些规则，不过需要先搞懂代码哦，不是太难，仔细研究一下吧。

将本文收藏到QQ书签与更多好友分享

上一篇：文章：文字、图片拖曳移动下一篇：文章：超逼真的JS图片放大镜

网页特效

Js表格排序美化版

本类浏览排行 »

本站推荐文章 »