程序员社区

【DOM】表格排序示例

表格排序

1.排序需要数组,获取需要参与排序的行对象数组
2.对行数组中的每行的年龄单元格数据进行比较,并完成行对象在数组中的位置置换
3.排好序的数组重新添加回表格

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            border: blue 1px solid;
            width: 500px;
            border-collapse: collapse;
        }
        table td{
            border: plum 1px solid;
            padding: 5px;
        }
        table th{
            border: plum 1px solid;
            padding: 5px;
            background-color: yellowgreen;
        }
        th a:link,th a:visited{
            color: blueviolet;
            text-decoration: none;

        }
    </style>
    <script type="text/javascript">
        function sortTable(){
            /*
          
             */
            //获取表格
            var tableNode = document.getElementById("tableid");
            //获取表格中的每一行
            var trNodes = tableNode.rows;
            //定义一个临时容器,存储需要排序的行对象
            var trArr = [];
            //遍历原行集合
            for(var i=1;i<trNodes.length;i++) {
                //将需要排序的行对象存储到临时容器中
                trArr[i-1] = trNodes[i];
            }
                //对临时容器排序
                mySort(trArr);

                //将排序完的行对象添加到表格
                for(var x=0;x<trArr.length;x++){
                    trArr[x].parentNode.appendChild(trArr[x]);
                }

        }
        function mySort(arr){
            for(var x=0;x<arr.length-1;x++){
                for(var y=x+1;y<arr.length;y++){
                    if(arr[x].cells[1].innerHTML>arr[y].cells[1].innerHTML){
                        var temp = arr[x];
                        arr[x]=arr[y];
                        arr[y]=temp;
                    }
                }
            }
        }
    </script>

</head>
<body>
<table id="tableid">
    <tr>
        <th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sortTable();">年龄</a></th>
        <th>地址</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>27</td>
        <td>南京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>淮北</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>46</td>
        <td>合肥</td>
    </tr>
    <tr>
        <td>李六</td>
        <td>42</td>
        <td>淮南</td>
    </tr>
    <tr>
        <td>赵七</td>
        <td>21</td>
        <td>杭州</td>
    </tr>
    <tr>
        <td>郭八</td>
        <td>42</td>
        <td>北京</td>
    </tr>
</table>
</body>
</html>

排序前:
在这里插入图片描述
排序后:
在这里插入图片描述

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 【DOM】表格排序示例

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区