(35)DOM应用之表格中的内容排序
2014-07-21 23:05
344 查看
基本思路:appendChild方法实质上是将原来存在的元素remove掉,然后在添加到后面去。
效果图:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function () { var oTab=document.getElementById('tab1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { var arr=[]; for(var i=0;i<oTab.tBodies[0].rows.length;i++) { arr[i]=oTab.tBodies[0].rows[i]; } arr.sort(function (tr1,tr2){ var n1=parseInt(tr1.cells[0].innerHTML); var n2=parseInt(tr2.cells[0].innerHTML); return n1-n2; }); for(var i=0;i<arr.length;i++) { oTab.tBodies[0].appendChild(arr[i]); } }; }; </script> </head> <body> <input id="btn1" type="button" value="排序"/> <table id="tab1" border="1" width="500"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>2</td> <td>XXX</td> <td>25</td> </tr> <tr> <td>5</td> <td>王五</td> <td>29</td> </tr> <tr> <td>4</td> <td>李四</td> <td>26</td> </tr> <tr> <td>3</td> <td>SSS</td> <td>24</td> </tr> <tr> <td>1</td> <td>Xuan</td> <td>23</td> </tr> </tbody> </table> </body> </html>
效果图:
相关文章推荐
- 25、DOM的高级应用2-------表格内容的排序
- (32)DOM应用之搜索表格中的内容(忽略大小写搜索)
- (33)DOM应用之搜索表格中的内容(模糊搜索)
- (31)DOM应用之搜索表格中的内容(简单搜索)
- (34)DOM应用之搜索表格中的内容(多关键字搜索)
- dom 小应用--活动表格
- 【翻译作品】JavaScript DOM学习第三章:内容表格
- javascript 表格内容排序 简单操作示例代码
- [js].net中表格数据的排序的js应用,非常简单(中国铁路查询)
- 通过js去对表格的列,根据其内容进行排序(升序或者降序)
- javascript 表格内容排序 简单操作
- Javascript_12_DOM_表格排序
- jquery对表格进行内容排序
- php ajax 表格排序,调整列宽,修改内容
- php ajax 表格排序,调整列宽,修改内容
- javascript 表格内容排序 简单操作示例代码
- JavaScript DOM 学习第三章 内容表格
- jquery 表格排序,实时搜索表格内容
- php ajax 表格排序,调整列宽,修改内容
- jquery 表格排序、实时搜索表格内容(附图)