昨天看到一篇關於表格排序的隨筆，鑒於本人還只會簡單的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>
運行界面：
大家復制代碼就可以看到效果啦！