如何使用原始 javascript 按字母顺序对两列表进行排序？答案

【问题标题】：How do you alphabetically sort a two column table using raw javascript?如何使用原始 javascript 按字母顺序对两列表进行排序？
【发布时间】：2016-07-29 22:17:01
【问题描述】：

假设我有下表：

<table border="1">
    <tr class="row">
        <td>mammal</td><td>dog</td>
    </tr>
    <tr class="row">
        <td>fish</td><td>goldfish</td>
    </tr>
    <tr class="row">
        <td>plant</td><td>bush</td>
    </tr>
    <tr class="row">
        <td>plant</td><td>tree</td>
    </tr>
    <tr class="row">
        <td>mammal</td><td>cat</td>
    </tr>
    <tr class="row">
        <td>fish</td><td>shark</td>
    </tr>
</table>

我正在尝试按字母顺序对该表进行排序。我想首先按第一列对其进行排序，然后按“每个类别”对第二列进行排序。所以我正在寻找的最终结果是：

fish    |  goldfish

fish    |  shark

mammal  |  cat

mammal  |  dog

plant   |  bush

plant   |  tree

如何使用 Javascript 执行这种二维排序？我最初的想法是创建一个行数组（克隆，而不是实际元素），然后对它们进行排序，删除表格的 innerHTML，然后按排序顺序逐个注入克隆。

我正在为实际的排序算法苦苦挣扎，哪一种众所周知的算法最适合用于两列，以及如何在 Javascript 中正确实现它。

【问题讨论】：

坦率地说，我将从对象中的数据开始，然后从该对象动态构建表。然后字母排序很简单，您只需使用新排序的数据重建表。
您应该将数据放在一个数组中，并使用所有数组都有的sort 方法。

标签： javascript arrays algorithm sorting html-table

【解决方案1】：

假设表格 id 是 myTable，这将重新排序并显示表格。

<script type="text/javascript">
    function sortRows(a,b)
    {
        return a.first > b.first || (a.first == b.first && a.second > b.second);
    }
    var table = document.getElementById('myTable');
    var rows = new Array();
    for (var i = 0; i < table.rows.length; i++)
    {
        rows.push({ 'first': table.rows[i].cells[0].innerHTML, 'second': table.rows[i].cells[1].innerHTML });
    }
    var sortedRows = rows.sort(sortRows);
    for(var i = 0; i < sortedRows.length; i++)
    {
        table.rows[i].cells[0].innerHTML = sortedRows[i].first;
        table.rows[i].cells[1].innerHTML = sortedRows[i].second;
    }
</script>

我用过innerHTML，虽然它可以是innerText。

【讨论】：

【解决方案2】：

首先您需要为您的表分配一个 ID，然后尝试下面的代码（例如，我在此使用 mytable 作为 ID示例）

var table = document.getElementById("mytable");
var firstArray = new Array();
for (var i = 0; i < table.rows.length; i++) {
    firstArray.push(table.rows[i].cells[0].innerHTML + "-" + table.rows[i].cells[1].innerHTML);
}
// now perform a basic sort
for (var i = 0; i < firstArray.length; i++) {
    for (var ii = i + 1; ii < firstArray.length; ii++) {
        if (firstArray[i] > firstArray[ii]) {
            var tmp = firstArray[i];
            firstArray[i] = firstArray[ii];
            firstArray[ii] = tmp;
        }
    }
}
// display results
for (var i = 0; i < firstArray.length; i++) {
    console.log(firstArray[i]);
}

如果你想把它分成两个数组，你可以在数组上循环

【讨论】：