javascript - 按两列对 HTML 表格进行排序

Question

我在表格中有几列，例如 A、B、C、D 和 E 列，我需要在我的 HTML 页面中显示这些列。在某些页面中，我需要仅根据页面的一列显示排序结果，例如表的第 3 列“C”列。我可以使用以下代码执行此操作:

function Ascending(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}
var rows = $('#table tr').not(':first').get();
$('#table tr').slice(1).remove();
rows.sort(function(rowA, rowB) {
  var keyA = $(rowA).children('td').eq(2).text().toUpperCase();
  var keyB = $(rowB).children('td').eq(2).text().toUpperCase();
  return Ascending(keyA, keyB);
});

但我还有另一个要求，其中我需要显示基于两列的排序结果，即在上述情况下基于 C 列的排序，E 列的结果也应该排序。例如:

排序前:

Column C  Column E
2         Fish
1         Box
7         Cat
2         Dog
1         Apple
2         Box
2         Axe
7         Box
2         Answer
7         Apple
6         Year
2         Goat

仅对 C 列进行排序后:

Column C  Column E
1         Box
1         Apple
2         Dog
2         Fish
2         Box
2         Axe
2         Goat
2         Answer
6         Year
7         Box
7         Apple
7         Cat

先对 C 列排序，然后对 E 列排序:

Column C  Column E
1         Apple
1         Box
2         Answer
2         Axe
2         Box
2         Dog
2         Fish
2         Goat
6         Year
7         Apple
7         Box
7         Cat

我无法实现。我该怎么做？

Answer 1

要按多列排序，您可以像这样编写比较函数:

(比较函数传递了两个“行”)

1. 比较第 1 行第 1 列与第 2 行第 1 列
   • 如果它们不同则返回结果(+ve 或 -ve 数字)
2. 比较第 1 行第 2 列与第 2 行第 2 列
   • 如果它们不同则返回结果(+ve 或 -ve 数字)
3. 对剩余的列重复上述操作
4. 返回0

以下示例说明如何编写按两列排序的比较函数。可以使用循环或递归按 n 列排序。

$(function() {
  function sortByColumn3(row1, row2) {
    var v1, v2;
    v1 = $(row1).find("td:eq(2)").text();
    v2 = $(row2).find("td:eq(2)").text();
    // for numbers you can simply return a-b instead of checking greater/smaller/equal
    return v1 - v2;
  }

  function sortByColumn3And5(row1, row2) {
    var v1, v2, r;
    v1 = $(row1).find("td:eq(2)").text();
    v2 = $(row2).find("td:eq(2)").text();
    r = v1 - v2;
    if (r === 0) {
      // we have a tie in column 1 values, compare column 2 instead
      v1 = $(row1).find("td:eq(4)").text();
      v2 = $(row2).find("td:eq(4)").text();
      if (v1 < v2) {
        r = -1;
      } else if (v1 > v2) {
        r = 1;
      } else {
        r = 0;
      }
    }
    return r;
  }
  $("#button1, #button2").on("click", function() {
    var rows = $("#table1 tbody tr").detach().get();
    switch (this.id) {
      case "button1":
        rows.sort(sortByColumn3);
        break;
      case "button2":
        rows.sort(sortByColumn3And5);
        break;
    }
    $("#table1 tbody").append(rows);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="button" id="button1" value="sortByColumn3">
<input type="button" id="button2" value="sortByColumn3And5">

<table id="table1" border="1" width="100%">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>x</td>
      <td>y</td>
      <td>2</td>
      <td>z</td>
      <td>Fish</td>
    </tr>
    <tr>
      <td>y</td>
      <td>z</td>
      <td>1</td>
      <td>x</td>
      <td>Box</td>
    </tr>
    <tr>
      <td>z</td>
      <td>x</td>
      <td>7</td>
      <td>y</td>
      <td>Cat</td>
    </tr>
    <tr>
      <td>x</td>
      <td>y</td>
      <td>2</td>
      <td>z</td>
      <td>Dog</td>
    </tr>
    <tr>
      <td>y</td>
      <td>z</td>
      <td>1</td>
      <td>x</td>
      <td>Apple</td>
    </tr>
    <tr>
      <td>z</td>
      <td>x</td>
      <td>2</td>
      <td>y</td>
      <td>Box</td>
    </tr>
    <tr>
      <td>x</td>
      <td>y</td>
      <td>2</td>
      <td>z</td>
      <td>Axe</td>
    </tr>
    <tr>
      <td>y</td>
      <td>z</td>
      <td>7</td>
      <td>x</td>
      <td>Box</td>
    </tr>
    <tr>
      <td>z</td>
      <td>x</td>
      <td>2</td>
      <td>y</td>
      <td>Answer</td>
    </tr>
    <tr>
      <td>x</td>
      <td>y</td>
      <td>7</td>
      <td>z</td>
      <td>Apple</td>
    </tr>
    <tr>
      <td>y</td>
      <td>z</td>
      <td>6</td>
      <td>x</td>
      <td>Year</td>
    </tr>
    <tr>
      <td>z</td>
      <td>x</td>
      <td>2</td>
      <td>y</td>
      <td>Goat</td>
    </tr>
  </tbody>
</table>