主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
js实现点击表头表格自动排序（含数字、字符串、日期）
2020-02-12
网页编程网
网页编程网
<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>
阅读原文
阅读
3553
123
显示电脑版