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>

效果如下：

 

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

两种方法均能实现点击一次实现从小到大排序，再次点击从大到小排序。