无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

小程序定制解决方法_JS完成点击表头表格主动排

时间:2021-01-12 14:49来源:小程序定制解决方法 作者:jianzhan 点击:
JS完成点一下表头报表全自动排列(含数据、标识符串、时间) 文章投稿:daisy 本文关键详细介绍了运用JS怎样完成点一下表头后报表全自动排列,在其中包括数据排列、标识符串
JS实现点击表头表格自动排序(含数字、字符串、日期)     投稿:daisy   这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序、字符串排序以及日期格式的排序,文中给出了完整的示例代码,相信对大家具有一定的参考价值,感兴趣的朋友们一起来看看吧。

效果图如下:

主要的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下''这种格式无法设置时间,替换成'/'
 return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime();
};

完整实例代码

 !DOCTYPE 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; 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-colla凡科抠图e: colla凡科抠图e; 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 
 th data-type="num" 工号 /th 
 th data-type="string" 姓名 /th 
 th data-type="string" 性别 /th 
 th data-type="date" 时间 /th 
 /tr 
 /thead 
 tbody 
 td 07 /td 
 td aaaa /td 
 td 男 /td 
 td  /td 
 /tr 
 td 03 /td 
 td mmmm /td 
 td 女 /td 
 td  /td 
 /tr 
 td 01 /td 
  /td 
 td 男 /td 
 td  /td 
 /tr 
 td 04 /td 
 td ffff /td 
 td 女 /td 
 td  /td 
 /tr 
 td 02 /td 
 td bbbb /td 
 td 男 /td 
 td  /td 
 /tr 
 td 06 /td 
 td ssss /td 
 td 女 /td 
 td  /td 
 /tr 
 td 05 /td 
 td tttt /td 
 td 男 /td 
 td  /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 = [];
 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:
 return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime();
})();
 /script 
 /body 
 /html 

总结

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信