3

我有一个包含如下表格的页面（按“名称”列自动排序）

  Name         Open Num   Total Num
-----------------------------------
Doe, John         0          0
Smith, Sarah      4          3
Tyler, Rose       7          8

第二个tr看起来像这样：

<tr id="1"><td class="N">Smith, Sarah</td><td class="O">4</td><td class="T">3</td></tr>

其中行 ID 是一个计数器（第一行 = 0，第二个 = 1，第三个 = 2 等），而单元格类是使用 jQuery 抓取列（$(".O")给出Open Num列）

我试图让表格根据数字列（Open Num和Total Num）进行排序。所以输出看起来像这样（按Open Numor排序Total Num）：

  Name         Open Num   Total Num
-----------------------------------
Tyler, Rose       7          8
Smith, Sarah      4          3
Doe, John         0          0

到目前为止，我将数字存储到一个数组arrQuick中，并将行号存储在另一个数组rowCount中。然后我使用快速排序方法对数据进行排序，同时对第二个数组进行排序，效果很好。所以现在我有了排序的数据和我的行应该在的顺序。

问题

我无法弄清楚如何让表格行正确更新。

到目前为止，我有这个。

for(var i=0;i<rowCount.length;i++){
    var tmpHolder=$("#"+i).html();
    $("#"+i).html($("#"+rowCount[rowCount.length-(i+1)]).html());
    $("#"+rowCount[rowCount.length-(i+1)]).html(tmpHolder);
}

单步执行时，我可以看到最初更新正在运行。然而，最终它到达了某个点，行被更新到他们不应该的地方，我不知道为什么。

4

1 回答 1

2

您可以根据表格单元格的值对行进行排序。以下方法接受单元格的 className 并根据该单元格的文本内容对行进行排序。

$.fn.sortTable = function(cls) {
    this.find('tr').sort(function(a, b){
       return $(a).find('td.'+cls).text() > $(b).find('td.' + cls).text();
    }).appendTo(this.find('tbody'));
}

$('table').sortTable('O');

更新了支持升序和降序的方法。

$.fn.sortTable = function (opt) {
    var sort = typeof opt.sortType !== 'undefined' ? opt.sortType : 'asc',
        cls = opt.cls;
    if (!cls) return;

    var $tr = this.find('tbody').children().sort(function(a, b){
       return $(a).find('.' + cls).text() > $(b).find('.' + cls).text();
    });

    if (sort === 'des') {
       $tr = $tr.toArray().reverse();
    }
    this.find('tbody').append($tr);
}

$('table').sortTable({
    cls: 'N',    // className of the cells
    sortType: 'des'  // order 'asc' || 'des' 
});

http://jsfiddle.net/Af7mG/

于 2013-05-06T20:37:21.337 回答