JS实现的点击表头排序功能示例
程序员文章站
2022-06-30 10:48:45
本文实例讲述了js实现的点击表头排序功能。分享给大家供大家参考，具体如下：
运行效果：
1、index.html文件：
本文实例讲述了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程序设计有所帮助。