appendChild：1、先把元素从原有的父级上删掉。2、添加到新的父级。

排序的原理：从一堆数里找出一个最小的数用appendChild插入到最后，再在剩下的数里找最小的数用appendChild插入到最后，如此重复就能找把所有的数实现排序。

表格排序思路：

1、获取元素。

2、创建一个空数组 var arr=[];

3、用for循环把表格的每行数赋值给数组 arr[i]=oTable.tBodies[0].rows[i];

4、用sort()把数组里面的元素进行排序。

5、用for循环把数组里排好序的数用appendChild插入到tBodies。

完整代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>排序</title>
 6 <script>
 7 window.onload=function()
 8 {
 9     var oBtn=document.getElementById('btn');
10     var oTable=document.getElementById('table');
11     
12     oBtn.onclick=function()
13     {
14         var arr=[];
15         for(var i=0;i<oTable.tBodies[0].rows.length;i++)
16         {
17             arr[i]=oTable.tBodies[0].rows[i];
18         };
19         
20         arr.sort(function(tr1,tr2){
21             n1=parseInt(tr1.cells[0].innerHTML);
22             n2=parseInt(tr2.cells[0].innerHTML);
23             return n1-n2;
24         });    
25         
26         for(var i=0;i<arr.length;i++)
27         {
28             oTable.tBodies[0].appendChild(arr[i]);
29         };
30     };
31 };
32 </script>
33 </head>
34 
35 <body>
36 <input type="button" value="排序" id="btn" />
37 <table id="table" border="1" width="100%" cellpadding="0" cellspacing="0">
38     <thead>
39         <tr>
40             <th>ID</th>
41             <th>姓名</th>
42             <th>专业</th>
43         </tr>
44     </thead>
45     <tbody>
46         <tr>
47             <td>58</td>
48             <td>Simon</td>
49             <td>网站设计</td>
50         </tr>
51         <tr>
52             <td>20</td>
53             <td>Melon</td>
54             <td>网站设计</td>
55         </tr>
56         <tr>
57             <td>98</td>
58             <td>张三</td>
59             <td>物流</td>
60         </tr>
61         <tr>
62             <td>87</td>
63             <td>李四三</td>
64             <td>物流</td>
65         </tr>
66         <tr>
67             <td>798</td>
68             <td>张三</td>
69             <td>物流</td>
70         </tr>
71     </tbody>
72 </table>
73 </body>
74 </html>