JavaScript-點擊表格的表頭進行排序

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>

效果以下：

 

1、原生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);
}

2、編寫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();
});

兩種方法均能實現點擊一次實現從小到大排序，再次點擊從大到小排序。