javascript - 一次性设置 HTML 表格行

Question

我目前的代码可以遍历 html 表的每一行并用不同的行更新它。

这是代码

    function sort(index) {
        var rows = $table.find('tbody tr');
        var a = $table.find('tbody tr');

        //Only sort if it has not been sorted yet and the index not the same
        if(sortedIndex === index){
            for(var i = 0; i < rows.length; i++){
                a[i].outerHTML = rows[(rows.length - i)-1].outerHTML;
            }
            toggleSorted();
        }else{
            sortedIndex = index;
            rows.sort(naturalSort);

            for (var i = 0; i < rows.length; i++) {
                a[i].outerHTML = rows[i].outerHTML;
            }
            sortedDown = true;
        }

        $('#${tableId}').trigger('repaginate');
    };

我想做的是不要遍历 for 循环中的每一行并设置 a[i].outterHTML = rows[i].outterHTML;我想一次设置所有行。目前设置它们大约需要 1.5 秒，而且非常慢......唯一的问题是我似乎找不到办法做到这一点。这实际上可能吗？ (在我正在处理的大型数据集上需要 1.5 秒)。

Answer 1

由于行是相同的，只是重新排序，您可以 .append他们的新订单:

var $tBody = $table.find('tbody');
var $rows = $tBody.find('tr');

if(sortedIndex === index){
    toggleSorted();

    $tBody.append($rows.get().reverse());
} 
else {
    sortedIndex = index;
    sortedDown = true;

    $tBody.append($rows.get().sort(naturalSort));
}

这是一个演示上述内容的 fiddle :http://jsfiddle.net/k4u45Lnn/1/