JS实现的点击表头排序功能的示例代码分享-js教程-PHP中文网

首页

web前端

js教程

JS实现的点击表头排序功能的示例代码分享

黄舟

Mar 27, 2017 pm 02:40 PM

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

本文实例讲述了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, &#39;/&#39;));
}
/* 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&#39;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 :-) */

登录后复制

以上是JS实现的点击表头排序功能的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7889

Java教程

1650

CakePHP 教程

1411

Laravel 教程

1302

PHP教程

1248

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。

See all articles

JS实现的点击表头排序功能的示例代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题