JS表格排序
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>
