javascript - 使用 javascript 或 jquery 根据表头列对表行进行排序

Question

我有这样的东西

<table>
    <thead>
        <tr>
            <th>S.L.</th>
            <th>name</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Ronaldo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Messi</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Ribery</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Bale</td>
        </tr>
    </tbody>
</table>

我想要的是对 <tr> 进行排序的 <tbody>当点击 th按照下面的升序和降序交替排列th点击。

1. 如果有人点击 S.L th然后它显示表行 每次点击时先降序再升序。
2. 点击时Name th它应该以降序显示名称 顺序，然后升序，各自不变 S.L

这里是 fiddle

Answer 1

您可能希望看到此页面:
http://blog.niklasottosson.com/?p=1914

我想你可以这样做:

演示:http://jsfiddle.net/g9eL6768/2/

HTML:

 <table id="mytable"><thead>
  <tr>
     <th id="sl">S.L.</th>
     <th id="nm">name</th>
  </tr>
   ....

JS:

//  sortTable(f,n)
//  f : 1 ascending order, -1 descending order
//  n : n-th child(<td>) of <tr>
function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_sl = 1; // flag to toggle the sorting order
var f_nm = 1; // flag to toggle the sorting order
$("#sl").click(function(){
    f_sl *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_sl,n);
});
$("#nm").click(function(){
    f_nm *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_nm,n);
});

希望这对您有所帮助。