HTML:
<table class="heroinfo">
<thead title="點選排序">
<tr>
<th>英雄</th><th>力量</th><th>靈活</th><th>智力</th><th>移速</th>
</tr>
</thead>
<tbody>
<tr>
<td>英雄1</td><td>28</td><td>32</td><td>20</td><td>300</td>
</tr>
<tr>
<td>英雄2</td><td>29</td><td>22</td><td>30</td><td>320</td>
</tr>
<tr>
<td>英雄3</td><td>25</td><td>30</td><td>25</td><td>310</td>
</tr>
<tr>
<td>英雄4</td><td>33</td><td>28</td><td>22</td><td>305</td>
</tr>
<tr>
<td>英雄5</td><td>27</td><td>36</td><td>20</td><td>330</td>
</tr>
</tbody>
</table>
效果如下:
一、原生JS實作:來自JS權威指南,比書上多了再次點選後逆序排列的功能
//查找表格的<th>元素,讓它們可單擊
function makeSortable(table) {
var headers=table.getElementsByTagName("th");
for(var i=0;i<headers.length;i++){
(function(n){
var flag=false;
headers[n].onclick=function(){
// sortrows(table,n);
var tbody=table.tBodies[0];//第一個<tbody>
var rows=tbody.getElementsByTagName("tr");//tbody中的所有行
rows=Array.prototype.slice.call(rows,0);//真實數組中的快照
//基于第n個<td>元素的值對行排序
rows.sort(function(row1,row2){
var cell1=row1.getElementsByTagName("td")[n];//獲得第n個單元格
var cell2=row2.getElementsByTagName("td")[n];
var val1=cell1.textContent||cell1.innerText;//獲得文本内容
var val2=cell2.textContent||cell2.innerText;
if(val1<val2){
return -1;
}else if(val1>val2){
return 1;
}else{
return 0;
}
});
if(flag){
rows.reverse();
}
//在tbody中按它們的順序把行添加到最後
//這将自動把它們從目前位置移走,故沒必要預先删除它們
//如果<tbody>還包含了除了<tr>的任何其他元素,這些節點将會懸浮到頂部位置
for(var i=0;i<rows.length;i++){
tbody.appendChild(rows[i]);
}
flag=!flag;
}
}(i));
}
}
window.onload=function(){
var table=document.getElementsByTagName("table")[0];
makeSortable(table);
}
二、編寫jQuery插件實作
;(function($){
$.fn.extend({
"makeSortable":function(){
var table=$(this),
headers=table.find('th');
for(var i=0,len=headers.length;i<len;i++){
(function(n){
var flag=false;
headers.eq(n).click(function() {
var tbody=table.children('tbody').eq(0);
var rows=tbody.children('tr');
rows=Array.prototype.slice.call(rows,0);
rows.sort(function(row1,row2){
var val1=$(row1).children('td').eq(n).text();
var val2=$(row2).children('td').eq(n).text();
if(val1>val2){
return 1;
}else if(val1<val2){
return -1;
}else{
return 0;
}
});
if(flag){
rows.reverse();
}
tbody.append(rows);
flag=!flag;
});
}(i));
}
return this;
}
});
})(jQuery);
$(function(){
$(".heroinfo").makeSortable();
});