Question

我正在尝试在客户端对动态构造的表进行排序。到目前为止，我已经完成了我的研究，发现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]);
}
}

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

Answer 1

您的代码中存在几个问题。

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

for(var x...

其次，不要使用for-in迭代像集合一样的数组。使用for。

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

第三，textContent集合没有cells属性。

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

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

您需要决定所需的单元格，并通过索引提出要求。

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

最后，您应该知道此技术不会显示DOM中排序的结果。你只是在对数组进行排序。您需要将新的顺序附加到DOM。

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

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

Answer 2

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

Answer 3

我不确定我是否遗漏了某些内容，但我确信您无法在textContent数组上使用cells。您需要索引cells，以便知道实际排序的列。如果你的行每行有4列（或者即使只有1列），你仍然需要告诉sort函数对哪一列进行排序。

所以在你的sort函数中，如果你想按第二列排序，你需要类似的东西：

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。

Answer 4

“不要使用for-in迭代像集合一样的数组。” - user1673729

tRows不是一个数组，它是一个HTML集合。这就是为什么我用“for in” - nodirtyrockstar

HTML集合 是 数组，如集合 。请勿使用for-in。

用于对表行进行排序的JavaScript数组排序（函数） - 不排序

4 个答案: