(11)按年龄对每行数据进行排序

按年龄对每行数据进行排序

重点理解:

for(var k=0;k<arr.length;k++)
        {
            arr[x].parentNode.appendChild(arr[k]);

        }

数组存的数据也是引用,即地址。因为dom树的存在,所以根据这个地址可以找到其父节点,然后添加入表格中

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

    function sortTable()
    {
        //获取待排序的表格对象
        var TabNode=document.getElementById("Tabid");

        //获取数据行集合
        var TrNodes=TabNode.rows;

        //定义临时容器,存储需要排序的行独享
        var arr=[];
        for(var i=1;i<TrNodes.length;i++)
        {
            arr[i-1]=TrNodes[i];
        }
        //对数组中的年龄属性进行排序

        for(var x=arr.length-1;x>0;x--)
        {
            for(var y=0;y<x;y++)
            {
                var TdNode1=arr[y].getElementsByTagName("td")[1];
                var TdNode2=arr[y+1].getElementsByTagName("td")[1];
                //alert(TdNode1.innerHTML+"---"+TdNode2.innerHTML)
                if(TdNode1.innerHTML>TdNode2.innerHTML)
                {

                    var TempNode=arr[y];
                    arr[y]=arr[y+1];
                    arr[y+1]=TempNode;

                }
            }
        }

        //将排完序的数组放入到表格中
        for(var k=0;k<arr.length;k++)
        {
            arr[x].parentNode.appendChild(arr[k]);

        }


    }
</script>
</head>  
<body>

<table id="Tabid">
        <tr >
           <th>姓名</th>
           <th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
           <th>地址</th>
         </tr >

          <tr  >
           <td>张三</td>
           <td>20</td>
           <td>北京</td>
         </tr>

          <tr   >
           <td>李四</td>
           <td>19</td>
           <td>南京</td>
         </tr>

         <tr  >
           <td>王五</td>
           <td>28</td>
           <td>上海</td>
         </tr>

         <tr >
           <td>赵六</td>
           <td>71</td>
           <td>大连</td>
         </tr>
       </table>   
</body>
</html>
posted @ 2017-08-07 21:53  测试开发分享站  阅读(186)  评论(0编辑  收藏  举报