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

Posted 2020-09-08

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