对表格进行动态排序!分不是问题! - 调试易

对表格进行动态排序!分不是问题!

http://expert.csdn.net/Expert/TopicView1.asp?id=1514463

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个如果用XML根本就不是问题:《XML创建可排序、分页的数据显示页面》
http://www.programfan.com/showarticle.asp?id=1925
呵.http://www.5inet.net/corp/list_stone.asp看看.用asp就最简单了.
http://www.csdn.net/Develop/list_article.asp?author=net_lover&myclassid=80&myclassName=JavaScript
var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
if (ie5 || dom)
initSortTable();
function initSortTable() {
arrowUp = document.createElement("SPAN");
var tn = document.createTextNode("5");
arrowUp.appendChild(tn);
arrowUp.className = "arrow";
arrowDown = document.createElement("SPAN");
var tn = document.createTextNode("6");
arrowDown.appendChild(tn);
arrowDown.className = "arrow";
}function sortTable(tableNode, nCol, bDesc, sType) {
var tBody = tableNode.tBodies[0];
var trs = tBody.rows;
var a = new Array();

for (var i=0; i<trs.length; i++) {
  a[i] = trs[i];
}

a.sort(compareByColumn(nCol,bDesc,sType));

for (var i=0; i<a.length; i++) {
  tBody.appendChild(a[i]);
}
}
function CaseInsensitiveString(s) {
return String(s).toUpperCase();
}
function parseDate(s) {
return Date.parse(s.replace(/\-/g, '/'));
}
/* alternative to number function
* This one is slower but can handle non numerical characters in
* the string allow strings like the follow (as well as a lot more)
* to be used:
*    "1,000,000"
*    "1 000 000"
*    "100cm"
*/
function toNumber(s) {
    return Number(s.replace(/[^0-9\.]/g, ""));
}
function compareByColumn(nCol, bDescending, sType) {
var c = nCol;
var d = bDescending;

var fTypeCast = String;

if (sType == "Number")
  fTypeCast = Number;
else if (sType == "Date")
  fTypeCast = parseDate;
else if (sType == "CaseInsensitiveString")
  fTypeCast = CaseInsensitiveString;
return function (n1, n2) {
  if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
   return d ? -1 : +1;
  if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
   return d ? +1 : -1;
  return 0;
};
}function sortColumn(e) {
var tmp, el, tHeadParent;
if (ie5)
  tmp = e.srcElement;
else if (dom)
  tmp = e.target;
tHeadParent = getParent(tmp, "THEAD");
el = getParent(tmp, "TD");
if (tHeadParent == null)
  return;

if (el != null) {
  var p = el.parentNode;
  var i;
  if (el._descending) // catch the null
   el._descending = false;
  else
   el._descending = true;

  if (tHeadParent.arrow != null) {
   if (tHeadParent.arrow.parentNode != el) {
    tHeadParent.arrow.parentNode._descending = null; //reset sort order
   }
   tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
  }
  if (el._descending)
   tHeadParent.arrow = arrowDown.cloneNode(true);
  else
   tHeadParent.arrow = arrowUp.cloneNode(true);
  el.appendChild(tHeadParent.arrow);

  // get the index of the td
  for (i=0; i<p.cells.length; i++) {
   if (p.cells[i] == el) break;
  }
  var table = getParent(el, "TABLE");
  // can't fail

  sortTable(table,i,el._descending, el.getAttribute("type"));
}
}function getInnerText(el) {
if (ie5) return el.innerText; //Not needed but it is faster

var str = "";

for (var i=0; i<el.childNodes.length; i++) {
  switch (el.childNodes.item(i).nodeType) {
   case 1: //ELEMENT_NODE
    str += getInnerText(el.childNodes.item(i));
    break;
   case 3: //TEXT_NODE
    str += el.childNodes.item(i).nodeValue;
    break;
  }

}

return str;
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
  return el;
else
  return getParent(el.parentNode, pTagName);
}
测试页面
<html>
<head>
<style>
.arrow {
FONT-WEIGHT: normal; FONT-FAMILY: Marlett; LETTER-SPACING: -3px; POSITION: relative; TOP: 2px
}
</style>
<SCRIPT language="JavaScript1.2" >

</SCRIPT>
</head>
<body>
<table  border="1" width="100%" onclick=sortColumn(event) class="ListTable"  cellpadding="0" cellspacing="0" >
    <thead>
    <tr>
        <td width="11%" class="TableRow" align="center" height="16">员工号</td>
        <td width="15%" class="TableRow" align="center" height="16">姓名</td>
        <td width="6%" class="TableRow" align="center" height="16">性别</td>
        <td width="20%" class="TableRow" align="center" height="16">身份证号</td>
    </tr>
    </thead>
    <tr>
        <td width="11%" class="TableRow" align="center" height="16">1</td>
        <td width="15%" class="TableRow" align="center" height="16">a</td>
        <td width="6%" class="TableRow" align="center" height="16">男</td>
        <td width="20%" class="TableRow" align="center" height="16">123</td>
    </tr>
      <tr>
       <td width="11%" class="TableRow" align="center" height="16">3</td>
        <td width="15%" class="TableRow" align="center" height="16">f</td>
        <td width="6%" class="TableRow" align="center" height="16">女</td>
        <td width="20%" class="TableRow" align="center" height="16">555</td>
   </tr>
   <tr>
        <td width="11%" class="TableRow" align="center" height="16">2</td>
        <td width="15%" class="TableRow" align="center" height="16">b</td>
        <td width="6%" class="TableRow" align="center" height="16">女</td>
        <td width="20%" class="TableRow" align="center" height="16">321</td>
    </tr>

</table>
</body>
</html>