5

我正在编写一些 JS 来对 HTML 表进行排序：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

2

您可以从 DOM 中删除行，进行排序，然后将它们添加回 DOM。

var tbody = table.tBodies[0];

var placeholder = document.createElement('tbody');
table.replaceChild(placeholder, tbody);

//sort rows in tbody

table.replaceChild(tbody, placeholder);
于 2016-08-15T04:16:57.167 回答
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

您可以使用jQuery及其Datatables 插件。在您的数据表语句中，您可以添加

"bSort": true

并且这项工作将由脚本完成。虽然如果你能找到一个纯 JS 的方式，我建议你使用它，这样你就不会给你的网页增加无用的重量。

于 2012-08-08T14:38:48.723 回答
0

如果数据存储在服务器上 - 我会使用排序类型（ASC、DESC 等）向服务器发送 Ajax 请求，对服务器上的数据进行排序（使用 PHP 等），然后在JavaScript 并全新编写表。

于 2012-08-08T14:36:28.687 回答