网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
网页特效
>> 正文
js实现点击表头表格自动排序（含数字、字符串、日期）
阅读：3956 输入：2020-02-12 20:17:07
<html> <head> <meta 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">工号</th> <th data-type="string">姓名</th> <th data-type="string">性别</th> <th data-type="date">时间</th> </tr> </thead> <tbody> <tr> <td>07</td> <td>aaaa</td> <td>男</td> <td>2012-12-12</td> </tr> <tr> <td>03</td> <td>mmmm</td> <td>女</td> <td>2013-12-16</td> </tr> <tr> <td>01</td> <td>cccc</td> <td>男</td> <td>2014-12-12</td> </tr> <tr> <td>04</td> <td>ffff</td> <td>女</td> <td>2015-12-12</td> </tr> <tr> <td>02</td> <td>bbbb</td> <td>男</td> <td>2016-12-18</td> </tr> <tr> <td>06</td> <td>ssss</td> <td>女</td> <td>2008-10-07</td> </tr> <tr> <td>05</td> <td>tttt</td> <td>男</td> <td>2012-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>
上一篇：
textarea多行文本域中如何以换行分隔后写入数据库
下一篇：
js表格排序编辑+拖拽+缩放
相关阅读
js实现批量生成18位身份证号码
js移动前端调试工具vconsole
超链接，点击后变内容，链接内容来回变更
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens