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

最新推荐文章于 2021-05-30 20:34:15 发布
最新推荐文章于 2021-05-30 20:34:15 发布
阅读量659 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 js 表格排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34861341/article/details/85492580
版权

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

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS实现点击表头表格自动排序（含数字、字符串、日期）</title>
    <style>
     #tableSort, #tableBtcSort{
        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;
        width:100%;
        text-align:center;
        margin:15px 0;
    }
    #tableSort th ,#tableBtcSort th {
        cursor:pointer;
        background:#eee
    }
    #tableSort tr:nth-child(even) ,#tableBtcSort   tr:nth-child(even){
        background:#f9f9f9
    }
    #tableSort th,#tableSort td , #tableBtcSort th, #tableBtcSort td{
        padding:10px;
        border:1px solid #ccc;
    }

    </style>
</head>

<body>
<table id="tableSort">
    <thead>
    <tr>
        <th data-type="num" onclick="sortpais('tableSort')">百分比</th>
        <th data-type="string" onclick="sortpais('tableSort')">姓名</th>
        <th data-type="date" onclick="sortpais('tableSort')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0.4%</td>
        <td>aaaa</td>
        <td>2012-12-12</td>
    </tr>
    <tr>
        <td>-3%</td>
        <td>mmmm</td>
        <td>2013-12-16</td>
    </tr>
    <tr>
        <td>0.44%</td>
        <td>cccc</td>
        <td>2014-12-12</td>
    </tr>
    <tr>
        <td>4%</td>
        <td>ffff</td>
        <td>2015-12-12</td>
    </tr>
    <tr>
        <td>2%</td>
        <td>bbbb</td>
        <td>2016-12-18</td>
    </tr>
    <tr>
        <td>-6.9%</td>
        <td>ssss</td>
        <td>2008-10-07</td>
    </tr>
    <tr>
        <td>5%</td>
        <td>tttt</td>
        <td>2012-07-22</td>
    </tr>
    </tbody>
</table>

<table id="tableBtcSort">
    <thead>
    <tr>
        <th data-type="num" onclick="sortpais('tableBtcSort')">工号</th>
        <th data-type="string"  onclick="sortpais('tableBtcSort')">姓名</th>
        <th data-type="string" onclick="sortpais('tableBtcSort')">性别</th>
        <th data-type="date" onclick="sortpais('tableBtcSort')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>7</td>
        <td>aaaa</td>
        <td>男</td>
        <td>2012-12-12</td>
    </tr>
    <tr>
        <td>3</td>
        <td>mmmm</td>
        <td>女</td>
        <td>2013-12-16</td>
    </tr>
    <tr>
        <td>1</td>
        <td>$cccc</td>
        <td>男</td>
        <td>2014-12-12</td>
    </tr>
    <tr>
        <td>4</td>
        <td>ffff</td>
        <td>女</td>
        <td>2015-12-12</td>
    </tr>
    <tr>
        <td>-2</td>
        <td>bbbb</td>
        <td>男</td>
        <td>2016-12-18</td>
    </tr>
    <tr>
        <td>6</td>
        <td>ssss</td>
        <td>女</td>
        <td>2008-10-07</td>
    </tr>
    <tr>
        <td>-5</td>
        <td>tttt</td>
        <td>男</td>
        <td>2012-07-22</td>
    </tr>
    </tbody>
</table>
<script src="sort.js?v=33asss66"></script>
<script type="text/javascript">
// (function(){



</script>
</body>
</html>

js

    function sortpais(tableId){
        var tbody = document.querySelector('#'+tableId).tBodies[0];
        var th = document.querySelector('#'+tableId).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,td,tbody);
                this.flag = -this.flag;
            };
        };
    }

    function sort(str,flag,n,td,tbody){
        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':
                if (a.indexOf('%')>0) {
                    a=a.replace("%","");
                }
                 if (b.indexOf('%')>0) {
                    b=b.replace("%","");
                } 
                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();
        };
    };

 

半碗面
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现表格的排序(点击表头)
06-07
快速的实现表格排序 只需要把代码加在开始即可以 简单易控制
JS版表格排序实现点击表头即可排序
12-15
JavaScripr版表格排序实现点击表头即可排序
js对table排序(类似点击Excel表头排序)
似水无痕-做最好的程序！
10-22 3737
姓名 出生年月 年龄 分数 一般 基础 1 1956-08-0215 56.7 aaa 2 1989-02-0143 98.2 ggg 3 1987-02-2323 75 bbb 4 1977-03-033469.8ddd5 1943年03月0399 56.8 ccc 6 2010/08/022177.7 eee 统计 总结
JavaScript-点击表格的表头进行排序
weixin_34303897的博客
01-21 178
HTML如下： &lt;table class="heroinfo"&gt; &lt;thead title="点击排序"&gt; &lt;tr&gt; &lt;th&gt;英雄&lt;/th&gt;&lt;th&gt;力量&lt;/th&gt;&lt;th&gt;敏捷&lt;/th&
js 点击表头进行排序
MoLvSHan的博客
06-09 3016
示例图如下，点击技能ID时进行正反排序       html代码如下： &lt;thead&gt; &lt;tr class="text-c"&gt; &lt;th width="25"&gt;&lt;input type="checkbox" name="" value=""&gt;&lt;/th&gt;
JavaScript实现表格排序，点击表头切换升序降序，非常简单
08-27
例如，对于日期或数字，你可能需要将`innerHTML`转换为数字进行比较，而不是直接比较字符串。 总的来说，通过简单的JavaScript代码，我们可以轻松地为HTML表格添加排序功能，提高用户的交互体验。这个功能在诸如...
JS实现的点击表头排序功能示例
10-20
1. **确定排序依据**：获取当前点击的列，以及该列的数据类型（字符串、数字、日期等）。 2. **获取所有行**：使用`getElementsByTagName('tr')`获取表格的所有行，不包括表头行。 3. **处理数据**：将每行的指定列...
JavaScript表格排序，点击表头即可排序
05-12
内容索引:脚本资源,Ajax/JavaScript,表格排序,表头　JavaScript表格排序，点击表头即可排序，此脚本支持中文汉字排序、中英文混合排序、数据大小排序、文件名称类型排序、日期排序、价格排序、中文和数字排序;...
JavaScript 点击表头，实现排序效果
qq_37758122的博客
09-04 535
<head> <meta charset="UTF-8"> <title>哈哈哈哈</title> </head> <style> table{ border-collapse:collapse; width:90%; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35p
js表格点击表头排序
11-25
在一个表格中,单击表头进行该列的排序,无需后台
js 实现 单击表头实现表格排序
03-31
js 实现 单击表头实现表格排序! 值得下载看看!资源免费,大家分享!!
纯js实现点击表头排序,轻量级JavaScript表格内容排序代码
08-06
绝对是好东西 如果你刚好找这方面的资料要实现点击表头就产生排序，绝对实用,物超所值 轻量级JavaScript表格内容排序代码 对生产的html进行排序，不需要与数据库交互，速度性能好
表格自动排序，点击任意列，可以实现该列的自动排序，js写的
10-29
表格自动排序，点击任意列，可以实现该列的自动排序，纯js写的，使用不需要任何改动，只需要在table中设置属性。欢迎大家下载，也好让我赚点积分，嘿嘿
js实现点击table表头字段，根据字段排序例子
11-01
js实现点击table表头字段，根据字段排序例子。在表中添加js代码后可以自动排序，非常方便！
js 点击表头排序
ljz520lx的专栏
08-23 137
示例代码如下： [quote] K2046.TableSorter body{font-size:12px;line-height:25px;} tr{height:25px;} th{font-size:14px;border-bottom:solid 1px #DDDDDD;background-color:#EEEEEE;} td{font-size:12px;t...
html自动排序数字,JS实现点击表头表格自动排序（含数字、字符串、日期）
weixin_39927683的博客
05-30 431
效果图如下：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....
JS实现点击表头排序：字母/数字/日期排序示例
表头部分包含五个列，分别为字符串、不区分大小写的字符串、数字、日期以及一个无排序标识的列。每个表头单元格（`<th>`）带有`title`属性，用于指定排序依据。 ```html (event)"> <td>String ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值