Question

我有一个 TR （或 divs 与类 - 不很重要）

我想按SCORE.

对行进行排序

Name     |     Age        |Score 
-----------------------------------
John           26           90
paul           25           75
ringo          25           77

我know已经有一个jquery插件可以对tables进行排序，但我希望自己构建my。

我在分数列中找到值时没有问题 - 这很容易。

我的问题是如何排序和显示新结果？我想到了什么

1）将所有tr的元素都带到jQuery元素数组中。

2）通过.each排序数组

3）删除旧内容

4）通过.each循环 - 按照外观的顺序“追加”每个TR   数组。

有更好的方法吗？

Answer 1

我之前编写了一种有效的排序表算法（answer）。我调整了这个案例的功能：

function sortTable(){
    var tbl = document.getElementById("myTable").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[2].textContent || row.cells[2].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（）;

代码说明：

创建了两个变量： HTMLTableSectionElement tbl和 Array store。
循环遍历tBody（=行）的所有元素，并在store中推送一个新数组，其中包含两个元素：[sortnr, row]。
sortnr保存行的第二个单元格的数值，用于排序函数（向前看）
row是对 HTMLTableRowElement 的引用，稍后用于移动行。
store.sort(..)根据store对数组sortnr进行排序（如上所述，此解释为＃2）。
循环遍历排序的数组，并将行追加到表的末尾（tbl.appendChild从前一个位置移动节点）

请注意，第3列（单元格索引2）中没有有效数字的元素根本不会移动。这些都是最重要的。

如果要在末尾放置无效行，请使用：

for(var i=store.length-1; i>=0; i--){
    tbl.insertBefore(store[i][1], tbl.rows[0]);
}

Royi Namir提问（发表评论）

你是男人。还有一个问题：你写了'tbl.appendChild 将节点从前一个位置移动'，然后我将thoguth移到我自己的位置该动作是appendChild - 但它在幕后移动（！）元件。我读到了它，他们说如果它是同一个对象然后它移动了。但他怎么知道它的同一个对象呢？他没有任何ID或东西可以识别...

<强>答案：
（现实生活中的例子:) 说，你看到一个苹果放在桌子上。如果你想要同样的苹果在地板上，你会怎么做？ 拿起苹果并把它放在地板上。

同样适用于appendChild：当您请求追加节点时，脚本引擎希望将节点放置在树中。因此，将删除上一个节点，因为» appendChild执行不复制节点。的«
要复制节点，函数element.cloneNode()存在。

Answer 2

例如，如果你想让你的表按行按字母顺序排序，而每隔一行是前一个无用的伙伴（或者不包含适当的数据） - 你可以这样做（Rob W的回答有所不同））。

function sortTable(){
    var tbl = document.getElementsByTagName('table')[1].tBodies[1]; // magic numbers are bad
    var store = [];
    var len = tbl.rows.length / 2; // Assumes even rows. Loops become invalid otherwise.

    for(var i=0; i<len; i++){
        var row = tbl.rows[2*i];
        var sortnr = (row.cells[1].textContent || row.cells[1].innerText || row.cells[1].innerHTML);
        store.push([sortnr, row, tbl.rows[(2*i) + 1]]);
    }

    store.sort(function(a, b){
        a = a[0].toLowerCase(); // make sort case insensitive (waste resources?)
        b = b[0].toLowerCase();
        if (a < b)
           return -1 
        if (a > b)
           return 1
        return 0
    });

    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]); // sorted line
        tbl.appendChild(store[i][2]); // its partner
    }

    store = null;
}

sortTable();

在jQuery中对行进行排序的最佳方法是什么？

2 个答案: