5

HTML テーブルを並べ替える JS を書いています。HTML テーブルにはヘッダー行があり、列のヘッダーをクリックすると、その列に従って行が並べ替えられます。私の一般的なアルゴリズムは次のとおりです。

  1. HTML を JavaScript 配列に変換します。
  2. JavaScript 配列をソートします。
  3. JavaScript 配列を HTML テーブルに再変換します。

現在、私のコードはテーブルのすべての innerHTML 要素を置き換えています。基本的に、JS 配列をソートした後、テーブルのすべてのノードに触れて、その innerHTML 値を書き換えます。これを行うためのより効率的な方法があるかもしれないと感じていますが、思いつきません。

編集：

上記のアルゴリズムの (3) の部分を実行するコードを次に示します。関係のない部分を編集しました (文字列の変換のみ)。テーブルを配列に変換するときにヘッダー行をスキップしたため、インデックスが少し変なので、テーブルを書き直すときにそれを補っています。

for (var i = 0; i < numRows-1; i++){
 for (var j = 0; j < numCols; j++){
        var arrCell = tableArr[i][cols[j]];
        tableEl.rows[i+1].cells[j].innerHTML = arrCell;
    }
}
4

4 に答える 4

1

配列を使用して値を並べ替え、ドキュメント フラグメントを使用して更新を実行します。

function sortRows(tbody, compare, sortDesc) {
    //convert html collection to array
    var rows = [].slice.call(tbody.rows);
    //sort to desired order
    rows.sort(compare);
    if (sortDesc) {
        rows.reverse();
    }
    //update table
    var fragment = document.createDocumentFragment();
    rows.forEach(function (row) {
        fragment.appendChild(row);
    });
    tbody.appendChild(fragment);
}

複雑さは比較機能にあります。列のインデックスと、必要な型変換とキャッシュを考慮する必要があります。

これは、セル テキストの内容を整数に変換する基本的な例です。

function sortTable(table, columnIndex) {
    while (table && table.tagName !== 'TABLE') {
        table = table.parentNode;
    }
    if (table) {
        sortRows(table.tBodies[0], function compare(topRow, bottomRow) {
            var topValue = parseInt(topRow.cells[columnIndex].textContent, 10);
            var bottomValue = parseInt(bottomRow.cells[columnIndex].textContent, 10);
            return (topValue - bottomValue);
        });
    }
}

function sortRows(tbody, compare, sortDesc) {
    //convert html collection to array
    var rows = [].slice.call(tbody.rows);
    //sort to desired order
    rows.sort(compare);
    if (sortDesc) {
        rows.reverse();
    }
    //update table
    var fragment = document.createDocumentFragment();
    rows.forEach(function (row) {
        fragment.appendChild(row);
    });
    tbody.appendChild(fragment);
}
<table>
    <thead>
        <tr><th onclick="sortTable(this, 0)">Sort</th><th onclick="sortTable(this, 1)">Sort</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>25</td></tr>
        <tr><td>3</td><td>12</td></tr>
        <tr><td>2</td><td>40</td></tr>
        <tr><td>10</td><td>25</td></tr>
    </tbody>
</table>

于 2016-08-13T04:38:19.677 に答える
0

データがサーバーに保存されている場合 - Ajax リクエストをサーバーに並べ替えタイプ (ASC、DESC など) で送信し、サーバーでデータを並べ替え (PHP などを使用)、並べ替えられたデータを受信します。 JavaScript を使用して、まったく新しいテーブルを記述します。

于 2012-08-08T14:36:28.687 に答える
0

jQueryとそのDatatables プラグインを使用できます。データテーブルステートメントで、追加できます

"bSort": true

ジョブはスクリプトによって実行されます。ただし、純粋な JS の方法を見つけることができる場合は、それを使用することをお勧めします。そうすれば、Web ページに無駄な重みを追加することはありません。

于 2012-08-08T14:38:48.723 に答える