JS实现点击表头表格自动排序（含数字、字符串、日期)

效果图如下：

演示演示地址：点击这里

主要的射流研究…代码如下：

var t正文=文档。queryselector(' # tableSort ').tBodies[0]；var th=文档。queryselector(' # tableSort ')。广告。第[0]行.细胞；var TD=t body . row for(var I=0；长度；我。标志=1;第[i]条onclick=function(){ sort(this。GetAttribute('数据类型')、this.flag、this。CellIndex)；这个。flag=-这个。旗帜；};};函数排序(str，flag，n){ var arr=[]；//存放(var I=0；I TD . LengTii){ arr。推送(TD[I])；};//排序arr.sort(函数(a，b){返回方法(str，a.cells[n]).innerHTML，b.cells[n].innerHTML) *标志；});//添加for(var I=0；一、长度；身体。附录1；};};//排序方法函数方法(str，a，b){ switch(str){ case ' num ' ://数字排序返回a-b；打破；大小写" string"://字符串排序返回a . locale compare(b)；打破；default: //日期排序，IE8下'2012-12-12'这种格式无法设置时间，替换成/'返回新日期（一个拆分('-')。join('/').getTime()-新日期join('/').getTime()；};};完整实例代码

！DOCTYPEhtml xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleJS实现点击表头表格自动排序（含数字、字符串、日期)/title style # table ort { moz-user-select :-moz-none；蚊子用户-选择：无；-o-用户-选择：无；-khtml-用户-选择：无；-网络工具包-用户-选择：无；-ms-用户-选择：无；用户选择：无；边界崩溃：崩溃；边框间距： 0;保证金： 0；padd : 0；宽度： 100%;文本对齐：中心；边距：15 px 0；} #表排序第{ cursor:指针；后台： # eee } #表端口tr : th-child(偶数){背景： # F9 F9 } #表格端口th，#表格端口td { padding: 10pxborder:1px固体# CCC }/style/head dytable id=' table ort ' rth数据类型=' num '工号/th数据类型=“字符串”姓名/th数据类型=“字符串”性别/th数据类型="日期"时间/th/tr/the dtbody trtd 07/TDT AAAA/tdtd男/tdtd 2012-12-12/TD/trtd 03/tdtd mmmm/tdtd女/tdtd 2013-12-16/TD/trtd 01/tdtdtdcccc/tdtd男/TDT 2014-12-12/TD/TRT d04/TDT ffff/TDTD女/tdtd 2015-12-12/TD/trtd 02/tdtdtdbbbb/tdtd男/tdtd 2016-12-18/TD/trtd 06/tdtdtdssss/tdtd女/TDT 2008-10-07/TD/TRT TD05/TDT TTT/TDTD男/tdtd 2012-07-22/TD/tr/t正文/表格脚本；(函数(){ var t body=document。queryselector(' # tableSort ').tBodies[0]；var th=文档。queryselector(' # tableSort ')。广告。第[0]行.细胞；var TD=t body . row for(var I=0；长度；我。标志=1;第[i]条onclick=function(){ sort(this。GetAttribute('数据类型')、this.flag、this。CellIndex)；这个。flag=-这个。旗帜；};};函数排序(str，flag，n){ var arr=[]；for(var I=0；I TD . LengTii){ arr。推送(TD[I])；};arr.sort(函数(a，b){返回方法(str，a.cells[n]).innerHTML，b.cells[n].innerHTML) *标志；});for(var I=0；一、长度；身体。附录1；};};函数方法(字符串，a，b){ switch(字符串){ case 'num':返回a-b；打破；大小写“字符串”:返回a . locale compare(b)；打破；默认值：返回新日期join('/').getTime()-新日期join('/').getTime()；};};})();/脚本/正文/html总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。