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

时间：2021-05-26

效果图如下：

Demo演示地址：点击这里

主要的JS代码如下：

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(); };};

完整实例代码

<!DOCTYPE><html xmlns="http://pare(b); break; default: return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime(); };};})();</script></body></html>

总结

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章