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




原标题:JS学习之表格的排序

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

制胜跨境电商:https://www.goluckyvip.com/tag/8683.html
规避超卖风险:https://www.goluckyvip.com/tag/8684.html
紧跟销售趋势:https://www.goluckyvip.com/tag/8685.html
制定供货策略:https://www.goluckyvip.com/tag/8686.html
提升曝光:https://www.goluckyvip.com/tag/8687.html
海外仓选择:https://www.goluckyvip.com/tag/8689.html
武陵山大裂谷周围景点 武陵山大裂谷周围景点图片:https://www.vstour.cn/a/411233.html
南美旅游报价(探索南美洲的旅行费用):https://www.vstour.cn/a/411234.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流