JavaScript数组排序(函数）用于对表行进行排序，而不是排序

JavaScript array sort(function) to sort table rows- not sorting

本文关键字：排序 数组排序 函数 用于 JavaScript      更新时间：2023-09-26

我正在尝试在客户端对动态构建的表进行排序。到目前为止，我已经做了研究，发现JavaScript的sort（）方法会进行回调。以下是我目前所拥有的：

function retrvCatalog(e){
var merch = document.getElementById('merch');
var tRows = merch.rows;
var tBody = merch.tBodies;
var rowArr = [];
for (x in tRows){
    rowArr[x] = tRows[x];
}
rowArr.sort(function(a, b){
    if (a.cells.textContent < b.cells.textContent){
        return -1;
    }
    if(a.cells.textContent > b.cells.textContent){
        return 1;
    }
    return 0;
});
}

在Firebug中遍历它，似乎不会改变行的顺序。有人能帮我弄清楚我缺了什么吗？

最终算法

function retrvCatalog(e){
var fltr = e.id;
var merch = document.getElementById('merch');
var tblHead = merch.tHead;
merch.deleteTHead();
var tRows = merch.rows;
var rowArr = [];
for (var i=0; i<tRows.length; i++){
    rowArr[i] = tRows[i];
}
rowArr = rowArr.sort(function(a, b){
    if (fltr > 3){
        a = parseFloat(a.cells[fltr].innerHTML);
        b = parseFloat(b.cells[fltr].innerHTML);
    }
    else{
        a = a.cells[fltr].innerHTML;
        b = b.cells[fltr].innerHTML;
    }
    if (a>b){
        return 1;
    }
    if(a<b){
        return -1;
    }
    return 0;
});
while(merch.hasChildNodes()) {
    merch.removeChild(merch.firstChild);
}
merch.appendChild(tblHead);
for (i=0;i<rowArr.length;i++){
    merch.appendChild(rowArr[i]);
}
}

行中的最后两列是数字，因此排序方法略有变化。

代码中的几个问题。

首先，您没有声明x变量。

for(var x...

其次，不要使用for-in来迭代类似数组的集合。使用for。

for (var x = 0, len = tRows.length; x < len; x++){
    rowArr[x] = tRows[x];
}

第三，不存在cells集合的textContent属性。

这很容易通过记录其值进行测试。这应该是你尝试的第一件事。

console.log(a.cells.textContent); // undefined

你需要决定你想要哪个单元格，并通过索引来请求它。

console.log(a.cells[0].textContent);

最后，您应该注意，这种技术不会在DOM中显示排序的结果。您只是在对数组进行排序。您需要将新的排序追加到DOM中。

也许你知道这一点，但你没有在代码中显示出来。

我不知道行与tBodies的关系，所以我不能给出一个例子。但是，如果所有行都在一个tbody中，只需循环Array，并且tBody[0].appendChild(rowArr[i])

我不确定是否遗漏了什么，但我很确定您不能在cells数组上使用textContent。你需要对cells进行索引，这样你就知道要在哪一列上进行真正的排序。如果你的行每行有4列（或者即使只有1列），你仍然需要告诉排序函数要在哪列上进行排序。

所以在你的排序函数中，如果你想按第二列排序，你会想要这样的东西：

rowArr.sort(function (a, b) {
    if (a.cells[1].textContent < b.cells[1].textContent) {
        return -1;
    } else if (a.cells[1].textContent > b.cells[1].textContent) {
        return 1;
    }
    return 0;
});

我不确定你的细胞里有什么，但你可能想用.innerHTML，而不是.textContent。

rowArr.sort(function(a,b) {
    a = parseFloat(a.cells.textContent);
    b = parseFloat(b.cells.textContent);
    return (a-b);
};

"不要使用for in来迭代类似数组的集合。" -user1673729

tRows不是一个数组，它是一个HTML集合。这就是我在–nodirtyrockstar 中使用"for"的原因

HTML集合 是一个类似数组的集合。请勿使用for-in。

相关文章：