如何使用 jQuery 按两列对表格进行排序？

Question

我有一个 html 表格，如下所示：

<table border="1" id="table">

<tbody>
<tr>
    <th>Month</th>
    <th>Day</th>
</tr>

<tr>
    <td>March</td>
    <td>1</td>
</tr>

<tr>
    <td>February</td>
    <td>21</td>
</tr>

<tr>
    <td>February</td>
    <td>7</td>
</tr>

<tr>
    <td>March</td>
    <td>9</td>
</tr>

<tr>
    <td>February</td>
    <td>4</td>
</tr>

</tbody>
</table>

我正在尝试使用 jquery 对表格进行排序，以便它们以正确的月/日顺序显示。即：

February 4
February 7
February 21
March 1
March 9

我有一系列月份： var months = ['','January','February','March','April','May','June','July','August','September','October','November','December'];

我尝试使用以下命令订购表格：

// Order by Month
var $table=$('#table');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
    var keyA = $.inArray( $(a).find('td:eq(0)').text(), months)
    var keyB = $.inArray( $(b).find('td:eq(0)').text(), months);
    if ( keyA.length < 2 ) keyA = "0" + keyA
    if ( keyB.length < 2 ) keyB = "0" + keyB
    console.log ( keyA + ' ' + keyB )
    
    if (!keyA || !keyB) return -1;
    if (keyA > keyB) return 1;
    if (keyA < keyB) return -1;
    return 0;
});

// order by day
rows.sort(function(a, b) {
    var keyA = $(a).find('td:eq(1)').text();
    var keyB = $(b).find('td:eq(1)').text();
    if ( keyA.length < 2 ) keyA = "0" + keyA
    if ( keyB.length < 2 ) keyB = "0" + keyB
    console.log ( keyA + ' ' + keyB )
    
    if (!keyA || !keyB) return -1;
    if (keyA > keyB) return 1;
    if (keyA < keyB) return -1;
    return 0;
});

$.each(rows, function(index, row) {
    $table.children('tbody').append(row);
})

但这并没有奏效。我明白了：

March 1
February 4
February 7
March 9
February 21

我如何才能正确订购它们？

谢谢

Answer 1

要按两列排序，您需要分离排序逻辑，并按列调用它。如果主列上的排序逻辑确定值相同，则按次列对实体进行排序。试试这个：

let months = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let monthSort = (a, b) => Math.min(1, Math.max(-1, months.indexOf(a) - months.indexOf(b)));
let intSort = (a, b) => Math.min(1, Math.max(-1, a - b));

let $table = $('#table');
$table.find('tbody tr').sort((a, b) => {
  let diff = monthSort(a.cells[0].textContent.trim(), b.cells[0].textContent.trim());
  return diff !== 0 ? diff : intSort(parseInt(a.cells[1].textContent, 10), parseInt(b.cells[1].textContent, 10));
}).appendTo($table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="table">
  <tbody>
    <tr>
      <th>Month</th>
      <th>Day</th>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
    </tr>
    <tr>
      <td>February</td>
      <td>21</td>
    </tr>
    <tr>
      <td>February</td>
      <td>7</td>
    </tr>
    <tr>
      <td>March</td>
      <td>9</td>
    </tr>
    <tr>
      <td>February</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Answer 2

如果您将每个 tr 转换为 date 对象，您也可以在单个排序操作中执行此操作：

function dt(tr){
  return new Date([...tr.children].reverse().map(e=>e.textContent).join(" ")+" 2020");
}

const tbd=$('#table tbody');
tbd.find('tr').sort((a, b)=>dt(a)-dt(b)).appendTo(tbd)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="table">
  <tbody>
    <tr>
      <th>Month</th>
      <th>Day</th>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
    </tr>
    <tr>
      <td>February</td>
      <td>21</td>
    </tr>
    <tr>
      <td>February</td>
      <td>7</td>
    </tr>
    <tr>
      <td>March</td>
      <td>9</td>
    </tr>
    <tr>
      <td>February</td>
      <td>4</td>
    </tr>
  </tbody>
</table>