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

前端之家收集整理的这篇文章主要介绍了JS实现点击表头表格自动排序(含数字、字符串、日期)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图如下:

Demo演示地址:

主要的JS代码如下:

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

完整实例代码

JS实现点击表头表格<a href="/tag/zidong/" target="_blank" class="keywords">自动</a>排序(含数字、字符串、日期) ;(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'),n){ var arr = []; for(var i = 0;i < td.length;i++){ arr.push(td[i]); }; arr.sort(function(a,b.cells[n].innerHTML) * flag; }); for(var i = 0;i < arr.length;i++){ tbody.appendChild(arr[i]); }; }; function method(str,b){ switch(str){ case 'num': return a-b; break; case 'string': return a.localeCompare(b); break; default: return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime(); }; }; })();

总结

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

猜你在找的JavaScript相关文章