<table class="heroinfo">
    <thead title="点击排序">
        <tr>
            <th>英雄th><th>力量th><th>敏捷th><th>智力th><th>移速th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>英雄1td><td>28td><td>32td><td>20td><td>300td>
        tr>
        <tr>
            <td>英雄2td><td>29td><td>22td><td>30td><td>320td>
        tr>
        <tr>
            <td>英雄3td><td>25td><td>30td><td>25td><td>310td>
        tr>
        <tr>
            <td>英雄4td><td>33td><td>28td><td>22td><td>305td>
        tr>
        <tr>
            <td>英雄5td><td>27td><td>36td><td>20td><td>330td>
        tr>
    tbody>
table>

//查找表格的元素，让它们可单击
function makeSortable(table) {
    var headers=table.getElementsByTagName("th");
    for(var i=0;i){
        (function(n){
            var flag=false;
            headers[n].onclick=function(){
                // sortrows(table,n);
                var tbody=table.tBodies[0];//第一个
                var rows=tbody.getElementsByTagName("tr");//tbody中的所有行
                rows=Array.prototype.slice.call(rows,0);//真实数组中的快照

                //基于第n个元素的值对行排序
                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中按它们的顺序把行添加到最后
                //这将自动把它们从当前位置移走，故没必要预先删除它们
                //如果还包含了除了的任何其他元素，这些节点将会悬浮到顶部位置
                for(var i=0;i){
                    tbody.appendChild(rows[i]);
                }

                flag=!flag;
            }
        }(i));
    }
}

window.onload=function(){
    var table=document.getElementsByTagName("table")[0];
    makeSortable(table);
}

;(function($){
    $.fn.extend({
        "makeSortable":function(){
            var table=$(this),
                headers=table.find('th');
            for(var i=0,len=headers.length;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();
});