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 ...
随机推荐
- iOS - App 上架审核被原因拒总结
1.未遵守苹果 iOS APP 数据储存指导方针 如果你的 App 有离线数据下载功能,尤其需要关注这一点.因为离线数据一般占用存储空间比较大,可以被重新下载和重建,但是用户往往希望系统存储空间紧时也 ...
- 在python3.x下使用如下代码： import cPickle as pk 报错
在python3.x下使用如下代码: import cPickle as pk会报如下错误:ImportError: No module named 'cPickle' 原因:python2有cPic ...
- springboot + logback 简介
转Spring Boot干货系列:(七)默认日志框架配置 分类: Spring Boot(139) 目录(?)[+] 后端编程嘟 2017-04-05 21:53 前言 今天来介绍下sprin ...
- python标准库介绍——28 sha 模块详解
==sha 模块== ``sha`` 模块提供了计算信息摘要(密文)的另种方法, 如 [Example 2-39 #eg-2-39] 所示. 它与 ``md5`` 模块类似, 但生成的是 160 位签 ...
- Smarty中{literal}的使用详解(ecshop)
如何在文件里加入JS代码,如果按一般平常添加方法,会出错,解决的方法:把script套在{literal}{/literal}之间试试看,例如:{literal} {/literal} ------- ...
- Redis(二十一)：Redis性能问题排查解决手册（转）
性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息.通过这些信息来分析文章后面提到的一些性能指标. info命令输出的数 ...
- ev3dev：设置自动登录wifi
ev3有时系统不能自动输入wifi密码,在ev3主机上按来按去太麻烦了.看了下官网,解决方案如下: 主要是利用工具:connmanctl,这是一个交互式工具. robot@ev3dev:~$ sudo ...
- [svc][op]磁盘MBR分区机制- inode/Block深入实战
一 思路: 1,磁盘物理结构及大小计算 2,分区 MBR GPT知识 3,fdisk分区 挂载 自动挂载 4,格式化文件系统 5,inode block 6,软硬链接 查看磁盘: [root@moba ...
- Linux下C语言使用openssl库进行加密
在这里插一小节加密的吧,使用openssl库进行加密. 使用MD5加密 我们以一个字符串为例,新建一个文件filename.txt,在文件内写入hello ,然后在Linux下可以使用命令md5sum ...
- mogoose的bug之不能根据类型为number的字段查找数据
Users.find({paw:6868}).exec() //返回的结果为空 Users.find({paw:"6868"}).exec() //返回的结果也为空 Users.f ...