1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="btn1" type="button" value="排序"> 9 <table id="tab1" width="200" border="1" cellpadding="14"> 10 <thead> 11 <td>序号</td> 12 <td>姓名</td> 13 <td>年龄</td> 14 </thead> 15 <tbody> 16 <tr> 17 <td>2</td> 18 <td>张三</td> 19 <td>20</td> 20 </tr> 21 <tr> 22 <td>4</td> 23 <td>李四</td> 24 <td>25</td> 25 </tr> 26 <tr> 27 <td>3</td> 28 <td>赵龙</td> 29 <td>30</td> 30 </tr> 31 <tr> 32 <td>1</td> 33 <td>孙河</td> 34 <td>21</td> 35 </tr> 36 </tbody> 37 </table> 38 <script type="text/javascript"> 39 var oTab=document.getElementById('tab1'); 40 var oBtn=document.getElementById('btn1'); 41 oBtn.onclick=function(){ 42 var arr=[] 43 for(i=0;i<oTab.tBodies[0].rows.length;i++){ 44 arr[i]=oTab.tBodies[0].rows[i]; 45 } 46 arr.sort(function(tr1,tr2){ 47 var n1=parseInt(tr1.cells[0].innerHTML); 48 var n2=parseInt(tr2.cells[0].innerHTML); 49 return n1-n2; 50 }) 51 for(i=0;i<arr.length;i++){ 52 oTab.tBodies[0].appendChild(arr[i]) 53 } 54 } 55 </script> 56 </body> 57 </html>
这里的sort很方便，但是有一个小问题，如：ali=document.getelementbyid(li) 这里的ali严格意义上并不是一个标准的Array，所以sort并不能直接对ali使用。我们用一个arr来实现一个巧妙的转换。这样只要点击排序按钮，表格就会按照从大到小的顺序排列啦