javascript - 使用 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。每 <tr> 1 件(未排序)

Answer 1

fiddle :http://jsfiddle.net/qNwDe/

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

我的函数的另一个优点是它不介意丢失索引号。我目前指的是每行的第一个单元格，而不是通过类名获取元素。如果您想通过类名引用，我将更改我的函数:

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()。