这篇文章主要介绍了js实现的点击表头排序功能,可实现针对表格中的字母、数字、日期等格式进行排序的功能,涉及javascript针对页面table元素的获取及字符串、数字等排序操作相关技巧,需要的朋友可以参考下
本文实例讲述了JS实现的点击表头排序功能。分享给大家供大家参考，具体如下：
运行效果：
1、index.html文件：
Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8
下载
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
jb51.net点击表头排序
| String | String | Number | Date | No Sort |
| apple | Strawberry | 45 | 2001-03-13 | Item 0 |
| Banana | orange | 7698 | 1789-07-14 | Item 1 |
| orange | Banana | 4546 | 1949-07-04 | Item 2 |
| Strawberry | apple | 987 | 1975-08-19 | Item 3 |
| Pear | blueberry | 98743 | 2001-01-01 | Item 4 |
| blueberry | Pear | 4 | 2001-04-18 | Item 5 |
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 :-) */ 
