Dom-表格数据的排序，升序，降序

最新推荐文章于 2021-10-08 22:26:38 发布

qq_34734520

最新推荐文章于 2021-10-08 22:26:38 发布

阅读量451

点赞数

分类专栏： java之DOM

本文链接：https://blog.csdn.net/qq_34734520/article/details/51590829

版权

java之DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

web-strom开发

1.表格数据的升序降序排列

<span style="font-size:18px;color:#333333;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="table.css">
    <title></title>
    <style type="text/css">
        th a:link,th a:visited{
            color: #279bda;
            text-decoration: none;
        }
    </style>
    <script>
        var flag=true;
        function sortTable() {
            /*排序需要数组，获取需要排序的对象数组
            *对每一行的年龄单元格的数据进行比较，并完成对象在数组中的位置置换
            * 将排好的数组加会表格
            * */
            var oTabNode= document.getElementById("info");

            var collTrNode= oTabNode.rows;
            //定义一个临时容器，存储需要排序的行对象
            var trArr=[];
            //遍历原来集合，排序放到容器中
            for(var i=1;i < collTrNode.length;i++){
                trArr[i-1]= collTrNode[i];

            }
            //对临时数组排序
            mySort(trArr);
            //将排完的对象添加会表格
            //升序排列
            if(flag){
            for(var i= 0;i<trArr.length;i++){
                trArr[i].parentNode.appendChild(trArr[i]);
            }
                flag=false;
         }//降序排列
            else{
                for(var i=trArr.length-1;i>=0;i--){
                    trArr[i].parentNode.appendChild(trArr[i]);
                }
                flag=true;
            }
        }
        function mySort(arr){
            for(var i=0;i<arr.length-1;i++){
                for(var j=i+1;j<arr.length;j++){</span>

<span style="color: rgb(51, 51, 51);font-size:18px; white-space: pre;">			</span><span style="font-size:32px;color:#ff0000;">//注意转换格式</span><span style="font-size:18px;color: rgb(51, 51, 51);">
                    if(parseInt(arr[i].cells[1].innerHTML)>parseInt(arr[j].cells[1].innerHTML)){
                       var temp=arr[i];
                        arr[i]=arr[j];
                        arr[j]=temp;
                    }
                }
            }
        }
    </script>
</head>
<body>
<table id="info">
    <tr>
        <th>姓名</th>
        <th><a href="javascript:void(0)" οnclick="sortTable()">年龄</a></th>
        <th>地址</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>27</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>24</td>
        <td>重庆</td>
    </tr>
    <tr>
        <td>王二</td>
        <td>32</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>小强</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李白</td>
        <td>18</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>赵云</td>
        <td>22</td>
        <td>武汉</td>
    </tr>
    <tr>
        <td>曹操</td>
        <td>38</td>
        <td>青岛</td>
    </tr>
    <tr>
        <td>诸葛</td>
        <td>40</td>
        <td>南京</td>
    </tr>
</table>
</body>
</html></span>

2.代码中引用的css

table{
     border: #249bdb 1px solid;
     width: 500px;
     border-collapse: collapse;
 }
table td{
    border: #249bdb 1px solid;
    padding: 10px;
}
table th{
    border: #249bdb 1px solid;
    padding: 10px;
    background-color: rgb(200,200,200);
}