1

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

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

4

4 回答 4

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])

于 2012-09-15T17:32:36.453 回答
0 
rowArr.sort(function(a,b) {
    a = parseFloat(a.cells.textContent);
    b = parseFloat(b.cells.textContent);
    return (a-b);
};
于 2012-09-15T17:09:35.993 回答
0

我不确定我是否遗漏了什么，但我很确定你不能textContent在cells阵列上使用。您需要建立索引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.

于 2012-09-15T17:17:26.577 回答
-1

“不要使用 for-in 来迭代集合之类的数组。” - 用户1673729

tRows 不是一个数组，它是一个 HTML 集合。这就是我使用“for in”的原因——nodirtyrockstar

HTML Collection是一个类似于collection 的数组。不要使用for-in.

于 2012-09-15T18:06:36.593 回答