js简单实现表格排序

昨天看到一篇关于表格排序的随笔，鉴于本人还只会简单的js，不会使用封装，所以自己也试了一下写这个效果。可能不太优化，原理思路是：获取行对象tr，排序tr中要比较的对象td，排序后添加回tbody。如下：

样式如下：

<style>
thead tr td{
    cursor: pointer;
}
thead tr td:hover{
    text-decoration: underline;
}
</style>

结构如下：

<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td id="score">成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td>hoho</td>
<td>女</td>
<td>65</td>
</tr>
<tr>
<td>haha</td>
<td>男</td>
<td>73</td>
</tr>
<tr>
<td>hehe</td>
<td>女</td>
<td>67</td>
</tr>
</tbody>
</table>

js代码：

<script>
var score=document.getElementById('score');
var tbody=document.getElementsByTagName('tbody')[0];    //获取文档下的第一个tbdoy
var tr=tbody.getElementsByTagName('tr');     //获取tbody下的tr（数组）
var arr=[];
var isAsc=true;   //判断当前排序是否是正序
score.onclick=function(){
if(!isAsc){   //如果是反序，则进行一下操作 
for(var i=0;i<tr.length;i++){
arr.push(tr[i]);   //把tr数组复制到arr数组
}
arr.sort(function(tr1, tr2){    //数组排序arr.sort()
var value1 = tr1.getElementsByTagName('td')[2].innerHTML;
var value2 = tr2.getElementsByTagName('td')[2].innerHTML;
return value2.localeCompare(value1);   //localeCompare() 方法提供的是比较字符串的方法，如果value2>value1,则返回1；如果value2<value1,则返回-1;相等则0
});
Oinsert();   //进行文档添加操作
isAsc=true;  //点击之后反转一下顺序
} else {   //如果是正序，则进行一下操作
for(var i=0;i<tr.length;i++){
arr.push(tr[i]);
}
arr.sort(function(tr1, tr2){
var value1 = tr1.getElementsByTagName('td')[2].innerHTML;
var value2 = tr2.getElementsByTagName('td')[2].innerHTML;
return value1.localeCompare(value2);
});
Oinsert();
isAsc=false;
}
}

function Oinsert(){     //向文档添加已排好序的节点
var fragment=document.createDocumentFragment();   //当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法
for(var j=0;j<arr.length;j++){
fragment.appendChild(arr[j]);   //把数组中的元素添加到节点的子节点列表的末尾
}
tbody.appendChild(fragment);   //把fragment添加到tbody
}
</script>

运行界面：

 

大家复制代码就可以看到效果啦！