昨天看到一篇关于表格排序的随笔，鉴于本人还只会简单的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>
运行界面：
大家复制代码就可以看到效果啦！