JS实现点击表头表格自动排序（含数字、字符串、日期）
这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序，其中包含数字排序、字符串排序以及日期格式的排序，文中给出了完整的示例代码，并做了注释，相信大家都能看懂，感兴趣的朋友们一起来看看吧。
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现点击表头表格自动排序（含数字、字符串、日期）</title>
<style>
#tableSort {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
margin: 15px 0;
} #tableSort th {
cursor: pointer;
background: #eee
} #tableSort tr:nth-child(even) {
background: #f9f9f9
} #tableSort th,
#tableSort td {
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head> <body>
<table id="tableSort">
<thead>
<tr>
<th data-type="num">ID</th>
<th data-type="string">姓名</th>
<th data-type="string">性别</th>
<th data-type="date">时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>07</td>
<td>zzzz</td>
<td>男</td>
<td>2012-12-12</td>
</tr>
<tr>
<td>03</td>
<td>yyyy</td>
<td>女</td>
<td>2013-12-16</td>
</tr>
<tr>
<td>01</td>
<td>hhhh</td>
<td>男</td>
<td>2014-12-12</td>
</tr>
<tr>
<td>04</td>
<td>wwww</td>
<td>女</td>
<td>2018-01-12</td>
</tr>
<tr>
<td>02</td>
<td>dddd</td>
<td>男</td>
<td>2016-12-18</td>
</tr>
<tr>
<td>06</td>
<td>ssss</td>
<td>女</td>
<td>2018-03-16</td>
</tr>
<tr>
<td>05</td>
<td>tttt</td>
<td>男</td>
<td>2017-07-22</td>
</tr>
</tbody>
</table>
<script>
;
(function() {
var tbody = document.querySelector('#tableSort').tBodies[0];
var th = document.querySelector('#tableSort').tHead.rows[0].cells;
var td = tbody.rows;
for(var i = 0; i < th.length; i++) {
th[i].flag = 1;
th[i].onclick = function() {
sort(this.getAttribute('data-type'), this.flag, this.cellIndex);
this.flag = -this.flag;
};
}; function sort(str, flag, n) {
var arr = [];//存放DOM
for(var i = 0; i < td.length; i++) {
arr.push(td[i]);
};
//排序
arr.sort(function(a, b) {
return method(str, a.cells[n].innerHTML, b.cells[n].innerHTML) * flag;
});
//添加
for(var i = 0; i < arr.length; i++) {
tbody.appendChild(arr[i]);
};
}; //排序方法
function method(str, a, b) {
switch(str) {
case 'num': //数字排序
return a - b;
break;
case 'string': //字符串排序
return a.localeCompare(b);
break;
default: //日期排序，IE8下'2012-12-12'这种格式无法设置时间，替换成'/'
return new Date(a.split('-').join('/')).getTime() - new Date(b.split('-').join('/')).getTime();
};
};
})();
</script>
</body> </html>
效果图：
按时间排序（其他效果大家可以自己在本地预览）：
转载于：JS实现点击表头表格自动排序（含数字、字符串、日期）
JS实现点击表头表格自动排序（含数字、字符串、日期）的更多相关文章
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...
- 一百零一、SAP中ALV事件之十四，让ALV表格自动排序
如果我们需要对下图的凭证日期和物料进行排序,需要怎么做呢 一.我们来到ALV的定义 二.我们查看IT_SORT的定义,双击点进去 三.查看SLIS_T_SORTINFO_ALV定义 四.代码如下,定义 ...
- AdvStringGrid 点击标题头 自动排序
- ios排序NSArray(数字.字符串)
NSArray *originalArray = @[@"1",@"21",@"12",@"11",@"0&q ...
- sql server使用公用表表达式CTE通过递归方式编写通用函数自动生成连续数字和日期
问题:在数据库脚本开发中,有时需要生成一堆连续数字或者日期,例如yearly report就需要连续数字做年份,例如daily report就需要生成一定时间范围内的每一天日期.而自带的系统表mast ...
- C#：ListView控件如何实现点击列表头进行排序？
using System; using System.Collections; using System.Windows.Forms; namespace Common { /// <summa ...
- QT中Qtableview视图表格中点击表头进行排序
用QT写了一个小工具,主要是对Excel中大量的数据进行计算和显示. 写了有一段时间,然后断断续续的做一些修改和完善. 因为要显示的数据有多列,很自然的会想到要能够对显示的数据进行排序.如果直接操作m ...
- 非常强大的table根据表头排序,点击表头名称,对其内容排序
js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...
随机推荐
- python学习笔记——多进程中的锁Lock
1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...
- AVL平衡二叉搜索树原理及各项操作编程实现
C语言版 #include<stdio.h> #include "fatal.h" struct AvlNode; typedef struct AvlNode *Po ...
- mysql工作中常见问题
1.Error Code: 1044 - Access denied for user 'root'@'localhost' to database 'information_schema'Query ...
- cocos2dx 3.x 相机机制
一,3.x相机使用方法: CCSize winSize=CCDirector::sharedDirector()->getWinSize(); Camera* camera=Camera::cr ...
- 常见的web负载均衡方法总结
Web负载均衡的方法有很多,下面介绍几种常见的负载均衡方法. 1.用户手动选择方法 这是一种较为古老的方式.通过在主站首页入口提供不同线路.不同服务器连接的方式,来实现负载均衡.这种方式在一些提供下载 ...
- Java总结篇系列：Java多线程（四）
ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...
- 关于UI测试
分为UI逻辑测试和UI显示测试两部分.要根据不同的面板状态进行测试 状态 -UI逻辑 -显示测试 一般优先做UI逻辑测试,后做显示测试.因为显示内容要经常变动,而且看的始终比代码测的准.去测显示测试会 ...
- Vector3.Set的正确使用
直接调用position.Set会发现没有用.其实和其本身是结构体有关,要当成一个值类型来看待,因为他全部是在栈中. transform.position.Set(,,); 改成这样即可: var t ...
- 【Android】3.0 第3章 百度地图及其应用--预备知识
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.概述 这一章先来点有意思的百度地图应用示例,然后再分章详细介绍用C#开发Android App的各种基本技 ...
- Netlink 内核实现分析（二）：通信
在前一篇博文<Netlink 内核实现分析(一):创建>中已经较为具体的分析了Linux内核netlink子系统的初始化流程.内核netlink套接字的创建.应用层netlink套接字的创 ...