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来实现一个巧妙的转换。这样只要点击排序按钮,表格就会按照从大到小的顺序排列啦
原标题:JS学习之表格的排序
关键词:JS