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

最新推荐文章于 2022-06-13 09:32:35 发布

rocling

最新推荐文章于 2022-06-13 09:32:35 发布

阅读量1w

点赞数 1

分类专栏： html 文章标签： table

本文链接：https://blog.csdn.net/rocling/article/details/82620482

版权

html 专栏收录该内容

23 篇文章

订阅专栏

题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

姓名	力量	敏捷	智力
德鲁伊	17	24	13
月之骑士	15	22	16
众神之王	19	15	20
流浪剑客	23	15	14

基本思路：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>
    <style>

    </style>

    <!--不需要再次引用jquery-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        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");
            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));
            }
            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>

</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>

结果：