JS 表格排序--appendChild 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta charset="utf-8">
 5     <title>表格排序</title>
 6 <style type="text/css">
 7     table{
 8         width: 300px;
 9         text-align: center;
10     }
11     table,td{
12         border: 1px solid gray;
13     }
14 </style>
15 </head>
16 <body>
17 <button id="btn1">表格排序</button>
18 <table id="table1">
19     <thead>
20         <tr>
21             <td>ID</td>
22             <td>姓名</td>
23             <td>性别</td>
24             <td>年龄</td>
25         </tr>
26     </thead>
27     <tbody>
28         <tr>
29             <td>4</td>
30             <td>张三</td>
31             <td>男</td>
32             <td>24</td>
33         </tr>
34         <tr>
35             <td>1</td>
36             <td>李四</td>
37             <td>女</td>
38             <td>38</td>
39         </tr>
40         <tr>
41             <td>3</td>
42             <td>张五</td>
43             <td>男</td>
44             <td>25</td>
45         </tr>
46         <tr>
47             <td>2</td>
48             <td>张二</td>
49             <td>女</td>
50             <td>21</td>
51         </tr>
52     </tbody>
53 </table>

54 <script type="text/javascript">
55 window.onload=function(){
56     var tab=document.getElementById('table1');
57     var btn=document.getElementById('btn1');
58     btn.onclick=function(){
59         var arr=[];
60         for(var i=0;i<tab.tBodies[0].rows.length;i++){
61             arr[i]=tab.tBodies[0].rows[i];
62         }// sort方法只能应用于array数组类中，所以定义一个arr[]，重新定义sort()方法
63         arr.sort(function(tr1,tr2){
64             var n1=parseInt(tr1.cells[0].innerHTML);
65             var n2=parseInt(tr2.cells[0].innerHTML);
66             return n1-n2;
67         })
68         //排序完后,再将排序好的arr[i]appendChild到table中，调整实际显示顺序
69         for (var i = 0; i < arr.length; i++) {
70             //appendChild特点是先将元素从原父级中删除，再将元素添加到新父级元素中
71             tab.tBodies[0].appendChild(arr[i]);
72         }
73     }
74 }
75 </script>
76 </body>
77 </html>

 

posted @ 2017-04-10 12:32  倩初晴  阅读(350)  评论(0)    收藏  举报