你的位置:首页 > Java教程

[Java教程]JS学习之表格的排序


 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来实现一个巧妙的转换。这样只要点击排序按钮,表格就会按照从大到小的顺序排列啦