码迷,mamicode.com
首页 > 编程语言 > 详细

对table根据某个属性值进行排序

时间:2017-04-07 21:18:01      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:foreach   border   push   代码   doc   sort   tab   nbsp   cin   

问题:给定一个table如下,点击按钮根据年龄对表进行排序;

技术分享

 1 <table border="" cellspacing="" cellpadding="">
 2     <tr><th>姓名</th><th>年龄</th></tr>
 3     <tr><td>a</td><td>2</td></tr>
 4     <tr><td>b</td><td>4</td></tr>
 5     <tr><td>c</td><td>5</td></tr>
 6     <tr><td>d</td><td>1</td></tr>
 7     <tr><td>e</td><td>3</td></tr>
 8 </table>
 9 <input type="button" value = "sort"/>

思路:

1.将dom中的tr放到数组中;

2.利用数组的sort方法排序;

3.排序完毕后用重绘页面;

 

代码如下:

 1 var btn = document.getElementsByTagName("input")[0];
 2 var trs = document.getElementsByTagName("tr");
 3 var arr = [];
 4 for(var i = 1;i<trs.length;i++){
 5     arr.push(trs[i]);
 6 }
 7 btn.onclick = function(){
 8     arr.sort(function(x,y){
 9         return x.getElementsByTagName("td")[1].innerHTML-y.getElementsByTagName("td")[1].innerHTML
10     }).forEach(function(i){
11         document.getElementsByTagName("table")[0].appendChild(i);
12     })
13     
14 }

 

对table根据某个属性值进行排序

标签:foreach   border   push   代码   doc   sort   tab   nbsp   cin   

原文地址:http://www.cnblogs.com/liyonglong/p/6679963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!