欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现的点击表头排序功能示例

程序员文章站 2022-06-30 10:48:45
本文实例讲述了js实现的点击表头排序功能。分享给大家供大家参考,具体如下: 运行效果: 1、index.html文件:

本文实例讲述了js实现的点击表头排序功能。分享给大家供大家参考,具体如下:

运行效果:

JS实现的点击表头排序功能示例

1、index.html文件:

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<title>jb51.net点击表头排序</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="tablesort.js"></script>
<link type="text/css" rel="stylesheet" href="tablesort.css" rel="external nofollow" />
<style type="text/css">
body {
 font-family: verdana, helvetica, arial, sans-serif;
 font:  message-box;
}
code {
 font-size: 1em;
}
</style>
</head>
<body>
<table id="myheadtab" cellspacing="0" onclick="sortcolumn(event)">
 <thead>
 <tr>
  <td>string</td>
  <td title="caseinsensitivestring">string</td>
  <td>number</td>
  <td>date</td>
  <td>no sort</td>
 </tr>
 </thead>
  <tbody>
 <tr>
  <td>apple</td>
  <td>strawberry</td>
  <td>45</td>
  <td>2001-03-13</td>
  <td>item 0</td>
 </tr>
 <tr>
  <td>banana</td>
  <td>orange</td>
  <td>7698</td>
  <td>1789-07-14</td>
  <td>item 1</td>
 </tr>
 <tr>
  <td>orange</td>
  <td>banana</td>
  <td>4546</td>
  <td>1949-07-04</td>
  <td>item 2</td>
 </tr>
 <tr>
  <td>strawberry</td>
  <td>apple</td>
  <td>987</td>
  <td>1975-08-19</td>
  <td>item 3</td>
 </tr>
 <tr>
  <td>pear</td>
  <td>blueberry</td>
  <td>98743</td>
  <td>2001-01-01</td>
  <td>item 4</td>
 </tr>
 <tr>
  <td>blueberry</td>
  <td>pear</td>
  <td>4</td>
  <td>2001-04-18</td>
  <td>item 5</td>
 </tr>
  </tbody>
</table>
</body>
</html>

2、tablesort.js文件:

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 trl= trs.length;
 var a = new array();
 for (var i = 0; i < trl; i++) {
 a[i] = trs[i];
 }
 var start = new date;
 window.status = "sorting data...";
 a.sort(comparebycolumn(ncol,bdesc,stype));
 window.status = "sorting data done";
 for (var i = 0; i < trl; i++) {
 tbody.appendchild(a[i]);
 window.status = "updating row " + (i + 1) + " of " + trl +
   " (time spent: " + (new date - start) + "ms)";
 }
 // check for onsort
 if (typeof tablenode.onsort == "string")
 tablenode.onsort = new function("", tablenode.onsort);
 if (typeof tablenode.onsort == "function")
 tablenode.onsort();
}
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 sortcolumnwithhold(e) {
 // find table element
 var el = ie5 ? e.srcelement : e.target;
 var table = getparent(el, "table");
 // backup old cursor and onclick
 var oldcursor = table.style.cursor;
 var oldclick = table.onclick;
 // change cursor and onclick 
 table.style.cursor = "wait";
 table.onclick = null;
 // the event object is destroyed after this thread but we only need
 // the srcelement and/or the target
 var fakeevent = {srcelement : e.srcelement, target : e.target};
 // call sortcolumn in a new thread to allow the ui thread to be updated
 // with the cursor/onclick
 window.settimeout(function () {
 sortcolumn(fakeevent);
 // once done resore cursor and onclick
 table.style.cursor = oldcursor;
 table.onclick = oldclick;
 }, 100);
}
function sortcolumn(e) {
 var tmp = e.target ? e.target : e.srcelement;
 var theadparent = getparent(tmp, "thead");
 var el = getparent(tmp, "td");
 if (theadparent == null)
 return;
 if (el != null) {
 var p = el.parentnode;
 var i;
 // typecast to boolean
 el._descending = !boolean(el._descending);
 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 = arrowup.clonenode(true);
 else
  theadparent.arrow = arrowdown.clonenode(true);
 el.appendchild(theadparent.arrow);
 // get the index of the td
 var cells = p.cells;
 var l = cells.length;
 for (i = 0; i < l; i++) {
  if (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 = "";
 var cs = el.childnodes;
 var l = cs.length;
 for (var i = 0; i < l; i++) {
 switch (cs[i].nodetype) {
  case 1: //element_node
  str += getinnertext(cs[i]);
  break;
  case 3: //text_node
  str += cs[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);
}

3、tablesort.css文件:

tr  {background: window;}
td  {color: windowtext; font: menu; padding: 1px; padding-left: 5px; padding-right: 5px;
  border-right: 1px solid buttonshadow;
  border-bottom: 1px solid buttonshadow;
}
table {border-top: 1px solid buttonshadow;
  border-left: 1px solid buttonshadow;
  border-right: 1px solid buttonhighlight;
  border-bottom: 1px solid buttonhighlight;
   }
thead td {background: buttonface; font: menu; border: 1px outset white;
  padding-top: 0; padding: bottom: 0;
  border-top: 1px solid buttonhighlight;
  border-left: 1px solid buttonhighlight;
  border-right: 1px solid buttonshadow;
  border-bottom: 1px solid buttonshadow;
  height: 16px;
}
thead .arrow{font-family: webdings; color: black; padding: 0; font-size: 10px;
  height: 11px; width: 10px; overflow: hidden;
  margin-bottom: 5; margin-top: -3; padding: 0; padding-top: 0; padding-bottom: 2;}
  /*nice vertical positioning :-) */

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript表格(table)操作技巧大全》、《javascript操作dom技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结

希望本文所述对大家javascript程序设计有所帮助。