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

最新推荐文章于 2023-11-15 17:40:31 发布

转载最新推荐文章于 2023-11-15 17:40:31 发布 · 396 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liyonglong/p/6679963.html

文章标签：

#开发工具

本文介绍了一种使用JavaScript实现的表格排序方法。通过获取DOM元素并利用数组的sort方法按年龄对表格进行排序，最后重新绘制页面展示排序结果。

问题：给定一个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 }