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

行の最後の2列は数値であるため、並べ替えの方法はわずかに異なります。

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の関係がわからないため、例を示すことはできません。ただし、すべての行が1つの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つしかない場合でも）、どの列を並べ替えるかを並べ替え関数に指示する必要があります。

したがって、並べ替え関数で2番目の列で並べ替える場合は、次のようにします。

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を使用しないでください。」--user1673729

tRowsは配列ではなく、HTMLコレクションです。それが私が「forin」を使用した理由です– nodirtyrockstar

HTMLコレクションは、コレクションのような配列です。使用しないでくださいfor-in。

于 2012-09-15T18:06:36.593 に答える