HTML中实现Table表头点击升序/降序排序

最新推荐文章于 2021-06-04 23:15:25 发布

clierwang

最新推荐文章于 2021-06-04 23:15:25 发布

阅读量9.4k

点赞数 3

分类专栏： HTML JavaScript 文章标签： HTML表格排序

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

一、前言

本文为转载文章，主要实现了点击表头对表格中数字排序的功能。
原文链接
相较于原文，这里更多的是
(1)添加了一些个人理解以及注释。
(2)并在文章的后半部分对代码稍加修改，使其同样可以对等长字符进行排序。
感兴趣的同学可以了解一下，希望能对大家有所帮助~~

二、源代码

1、原文代码（含转者注）

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th id="th1" onclick="SortTable(this)" class="as">力量</th>
                <th id="th2" onclick="SortTable(this)" class="as">敏捷</th>
                <th id="th3" onclick="SortTable(this)" class="as">智力</th>
            </tr>
            <tr>
                <td name="td0">德鲁伊</td>
                <td name="td1">17</td>
                <td name="td2">24</td>
                <td name="td3">13</td>              
            </tr>
            <tr>
                <td name="td0">月之骑士</td>
                <td name="td1">15</td>
                <td name="td2">22</td>
                <td name="td3">16</td>              
            </tr>
            <tr>
                <td name="td0">众神之王</td>
                <td name="td1">19</td>
                <td name="td2">15</td>
                <td name="td3">20</td>              
            </tr>
            <tr>
                <td name="td0">流浪剑客</td>
                <td name="td1">23</td>
                <td name="td2">15</td>
                <td name="td3">14</td>              
            </tr>
        </table>
    </body>
</html>
<script type="text/javascript"> 
    var tag=1;
    function sortNumberAS(a, b)//升序
    {
        return a - b    
    }
    function sortNumberDesc(a, b)//降序
    {
        return b-a
    }

    function SortTable(obj){
        var td0s=document.getElementsByName("td0");//得到id为td0的一串列表，下相同
        var td1s=document.getElementsByName("td1");
        var td2s=document.getElementsByName("td2");
        var td3s=document.getElementsByName("td3");
        var tdArray0=[];
        var tdArray1=[];
        var tdArray2=[];
        var tdArray3=[];
        for(var i=0;i<td0s.length;i++){
            tdArray0.push(td0s[i].innerHTML);
        }//每串都写到数组中
        for(var i=0;i<td1s.length;i++){
            tdArray1.push(parseInt(td1s[i].innerHTML));
        }
        for(var i=0;i<td2s.length;i++){
            tdArray2.push(parseInt(td2s[i].innerHTML));
        }
        for(var i=0;i<td3s.length;i++){
            tdArray3.push(parseInt(td3s[i].innerHTML));
        }
        var tds = document.getElementsByName("td" + obj.id.substr(2, 1));
        //得到当前传入对象的那一列
        var columnArray=[];
        for(var i=0;i<tds.length;i++){
            columnArray.push(parseInt(tds[i].innerHTML));
        }//当前那一列都写入column这个栈，是逆序的
        var orginArray=[];
        for(var i=0;i<columnArray.length;i++){
            orginArray.push(columnArray[i]);
        }//将这一列的内容再存储一遍，一会原来列表修改以后，
        //通过比对值的方式对应到当前行的内容，实现同行内容一起修改
        if(obj.className=="as"){
            columnArray.sort(sortNumberAS);   //排序后的新值，只排序了当前列
            obj.className="desc";
        }else{
            columnArray.sort(sortNumberDesc);  //排序后的新值
            obj.className="as";
        }


        for(var i=0;i<columnArray.length;i++){
            for(var j=0;j<orginArray.length;j++){
                if(orginArray[j]==columnArray[i]){
                    document.getElementsByName("td0")[i].innerHTML=tdArray0[j];
                    document.getElementsByName("td1")[i].innerHTML=tdArray1[j];
                    document.getElementsByName("td2")[i].innerHTML=tdArray2[j];
                    document.getElementsByName("td3")[i].innerHTML=tdArray3[j];
                    orginArray[j]=null;
                    break;
                }
            }
        }
    }
</script>

2、修改后同样可对等长字符串排序的代码

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
        <table>
            <tr>
                <th id="th0" onclick="SortTable(this)" class="as">姓名</th>
                <th id="th1" onclick="SortTable(this)" class="as">力量</th>
                <th id="th2" onclick="SortTable(this)" class="as">敏捷</th>
                <th id="th3" onclick="SortTable(this)" class="as">智力</th>
            </tr>
            <tr>
                <td name="td0">a</td>
                <td name="td1">17</td>
                <td name="td2">24</td>
                <td name="td3">13</td>              
            </tr>
            <tr>
                <td name="td0">b</td>
                <td name="td1">15</td>
                <td name="td2">22</td>
                <td name="td3">16</td>              
            </tr>
            <tr>
                <td name="td0">c</td>
                <td name="td1">19</td>
                <td name="td2">15</td>
                <td name="td3">20</td>              
            </tr>
            <tr>
                <td name="td0">d</td>
                <td name="td1">23</td>
                <td name="td2">15</td>
                <td name="td3">14</td>              
            </tr>
        </table>
    </body>
</html>
<script type="text/javascript"> 
    var tag=1;
    function SortTable(obj){
        var td0s=document.getElementsByName("td0");//得到id为td0的一串列表，下相同
        var td1s=document.getElementsByName("td1");
        var td2s=document.getElementsByName("td2");
        var td3s=document.getElementsByName("td3");
        var tdArray0=[];
        var tdArray1=[];
        var tdArray2=[];
        var tdArray3=[];
        for(var i=0;i<td0s.length;i++){
            tdArray0.push(td0s[i].innerHTML);
        }//每串都写到数组中
        for(var i=0;i<td1s.length;i++){
            tdArray1.push(td1s[i].innerHTML);
        }
        for(var i=0;i<td2s.length;i++){
            tdArray2.push(td2s[i].innerHTML);
        }
        for(var i=0;i<td3s.length;i++){
            tdArray3.push(td3s[i].innerHTML);
        }
        var tds = document.getElementsByName("td" + obj.id.substr(2, 1));
        //得到当前传入对象的那一列
        var columnArray=[];
        for(var i=0;i<tds.length;i++){
            columnArray.push(tds[i].innerHTML);
        }//当前那一列都写入column这个栈，是逆序的
        var orginArray=[];
        for(var i=0;i<columnArray.length;i++){
            orginArray.push(columnArray[i]);
        }//将这一列的内容再存储一遍，一会原来列表修改以后，
        //通过比对值的方式对应到当前行的内容，实现同行内容一起修改
        columnArray.sort();   //排序后的新值，只排序了当前列
        for(var i=0;i<columnArray.length;i++){
            for(var j=0;j<orginArray.length;j++){
                if(orginArray[j]==columnArray[i]){
                    document.getElementsByName("td0")[i].innerHTML=tdArray0[j];
                    document.getElementsByName("td1")[i].innerHTML=tdArray1[j];
                    document.getElementsByName("td2")[i].innerHTML=tdArray2[j];
                    document.getElementsByName("td3")[i].innerHTML=tdArray3[j];
                    orginArray[j]=null;
                    break;
                }
            }
        }
    }
</script>

运行截图

1、原文截图

在这里插入图片描述

2、修改后运行截图

在这里插入图片描述

clierwang

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
6
评论
HTML中实现Table表头点击升序/降序排序

一、前言本文为转载文章，主要实现了点击表头对表格中数字排序的功能。原文链接相较于原文，这里更多的是添加了一些个人理解以及注释，并在文章的后半部分对代码稍加修改，使其同样可以对等长字符进行排序，感兴趣的同学可以了解一下，希望能对大家有所帮助~~二、源代码1、原文代码（含转者注）<!DOCTYPE HTML><html> <head> ...
复制链接

扫一扫

专栏目录