使用Javascript或jQuery快速排序第一列的表

Question

我有一个动态填充的表FullCalendar.问题是FullCalendar不关心它的原始顺序.

该表如下所示:

<table id="caltbl">
   <thead>
       <tr> <th> </th>   <th> Date </th>   <th> hours </th>  ... </tr>
   </thead>
   <tbody>
       <tr> <td class="sortnr">1</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">3</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">2</td>   <td></td> ... </tr>
       <tr> <td class="sortnr">4</td>   <td></td> ... </tr>
   </tbody>
</table>

每行的第一行包含表应该排序的数字.

我有这个代码来排序它:

    var rows = $('#caltbl > tbody').children('tr').detach();

    for (var counter = 1; counter<=rows.length; counter++) {
        $(rows).each(function(index) {
            if ($(this).find(".sortnr").text()==counter){
               $('#caltbl > tbody:last').append($(this));
            }
        });
    }

这在Firefox中运行良好,但在Internet Explorer中引起了我的一个主要问题,因为有超过500个项目并且它挂起.我可以添加一个,setTimeout但这不会解决真正的问题.排序很慢.什么是更快的排序方式？

而不是必须从<table>html 开始,因为我说它动态填充所以我有一个Array包含HTML.每件1件<tr>(未分类)

Answer 1

小提琴:http://jsfiddle.net/qNwDe/

我编写了一个高效的跨浏览器方法来对表中的行进行排序.双循环中的多个JQuery选择器导致严重的性能问题(正如您所注意到的),因此我摆脱了JQuery.

我的功能的另一个优点是它不介意丢失索引号.我现在指的是每一行的第一个单元格,而不是按类名获取元素.如果你想通过classname引用,我会改变我的功能:

function sortTable(){
    var tbl = document.getElementById("caltbl").tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

sortTable()每当您想要对表进行排序时调用.

Answer 2

尝试这样的方法:http: //jsfiddle.net/qh6JE/

var rows = $('#caltbl > tbody').children('tr').get(); // creates a JS array of DOM elements
rows.sort(function(a, b) {  // use a custom sort function
    var anum = parseInt($(a).find(".sortnr").text(), 10);
    var bnum = parseInt($(b).find(".sortnr").text(), 10);
    return anum-bnum;
});
for (var i = 0; i < rows.length; i++) {  // .append() will move them for you
    $('#caltbl > tbody').append(rows[i]);
}

Answer 3

我认为在你的情况下有太多的循环.使用500个项目,您将循环500*500 = 250000次.没有那么多浏览器会知道如何做到这一点.

我建议使用array.sort()javascript 的本机方法根据自定义"比较函数"进行排序.

以下是它的完成方式(最有可能是它可以优化):http://jsfiddle.net/tsimbalar/Dw6QE/.

我们的想法是对比较sortNumber值的行列表进行排序......