全国服务热线:4008-888-888

公司新闻

微信小程序这么火_JS完成的点击表头排序功用示

JS实现的点击表头排序功能示例       这篇文章主要介绍了JS实现的点击表头排序功能,可实现针对表格中的字母、数字、日期等格式进行排序的功能,涉及javascript针对页面table元素的获取及字符串、数字等排序操作相关技巧,需要的朋友可以参考下

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

运行效果:

<文件:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"TR/xhtml1/DTD/xhtml1-strict.dtd" 
 html 
 head 
 点击表头排序 /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" 
 thead 
 td String /td 
 td title="CaseInsensitiveString" String /td 
 td Number /td 
 td Date /td 
 td No Sort /td 
 /tr 
 /thead 
 tbody 
 td apple /td 
 td Strawberry /td 
 td 45 /td 
 td  /td 
 td Item 0 /td 
 /tr 
 td Banana /td 
 td orange /td 
 td 7698 /td 
 td  /td 
 td Item 1 /td 
 /tr 
 td orange /td 
 td Banana /td 
 td 4546 /td 
 td  /td 
 td Item 2 /td 
 /tr 
 td Strawberry /td 
 td apple /td 
 td 987 /td 
 td  /td 
 td Item 3 /td 
 /tr 
 td Pear /td 
 td blueberry /td 
 td 98743 /td 
 td  /td 
 td Item 4 /td 
 /tr 
 td blueberry /td 
 td Pear /td 
 td 4 /td 
 td  /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...";
 pareByColumn(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, ""));
pareByColumn(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 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 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程序设计有所帮助。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服