zoukankan      html  css  js  c++  java
  • 关于表格排序问题

    <!DOCTYPE html>
    <html lang="en">
    <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; 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>
    <span></span>
    <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 = [];
    for(var i = 0;i < td.length;i++){
    arr.push(td[i]);
    };
    arr.sort(function(a,b){
    console.log(typeof a.cells[n].innerHTML)
    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>

    在这里主要有一个方法自己之前没有见过localeCompare,它是返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同,详情可看https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare介绍

  • 相关阅读:
    mysq 日期相减
    说说时间观与时间管理——北漂18年(71)
    ionic之切换开关
    ionic之单选框
    SELECT ... LOCK IN SHARE MODE和SELECT ... FOR UPDATE locks在RR模式下可以看到最新的记录
    14.5.2.3 Consistent Nonlocking Reads 一致性非锁定读
    14.5.2.2 autocommit, Commit, and Rollback
    14.5.2 事务隔离级别
    对于唯一索引使用唯一条件搜索, InnoDB 只锁定找到的index record,不是它之前的区间
    mysql explain 解释
  • 原文地址:https://www.cnblogs.com/shenwh/p/9214605.html
Copyright © 2011-2022 走看看