如何按两列而不是一列对 table 进行排序

Question

我有一个 table，我按建筑物名称对 ASC 进行排序。下一列是建筑物的相应建筑物编号。我有一个函数可以根据建筑物名称按 ASC 顺序对 table 进行排序。我希望能够同时按建筑物名称和建筑物编号进行排序。这是页面加载时 table 的片段。第一个 <td> 即建筑物名称按顺序排列。但是，下一个<td>，也就是楼号，顺序不对。

<tbody class="meterList">
   <tr>
      <td>ACB</td>
      <td>A2095</td>
   </tr>
   <tr>
      <td>ACB</td>
      <td>E1559</td>      
   </tr>
   <tr>
      <td>ACB</td>
      <td>E1540</td>      
   </tr>
   <tr>
      <td>ADH</td>
      <td>A0001</td>      
   </tr>
   <tr>
      <td>ADH</td>
      <td>E1076</td>     
   </tr>
   <tr>
      <td>ADH</td>
      <td>S0001</td>      
   </tr>
   <tr>
      <td>ADH</td>
      <td>E1075</td>      
   </tr>
</tbody>

这是我使用的函数，按建筑物名称按 ASC 顺序对 table 进行排序。

$('.meterList').find('tr').sort(function(a, b) {
    return $('td:first', a).text().localeCompare($('td:first', b).text());
 }).appendTo($('.meterList'))

我尝试做类似的事情来按第一个和第二个排序 <td> 但这没有用。

$('.meterList').find('tr').sort(function(a, b) {
    return $('td:first, td:second', a).text().localeCompare($('td:first, td:second', b).text());
 }).appendTo($('.meterList'))

如果有人知道我如何按两列排序任何建议，将不胜感激！

Answer 1

应该这样做：

const t=(tr,i)=>tr.cells[i].textContent;
$(".meterList tr").get()
  .sort((a,b)=>t(a,0).localeCompare(t(b,0)) || t(a,1).localeCompare(t(b,1)))
  .map(tr=>$(".meterList").append(tr));

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table><tbody class="meterList">
   <tr>
  <td>ACB</td>
  <td>A2095</td>
   </tr>
   <tr>
  <td>ACB</td>
  <td>E1559</td>      
   </tr>
   <tr>
  <td>ACB</td>
  <td>E1540</td>      
   </tr>
   <tr>
  <td>ADH</td>
  <td>A0001</td>      
   </tr>
   <tr>
  <td>ADH</td>
  <td>E1076</td>     
   </tr>
   <tr>
  <td>ADH</td>
  <td>S0001</td>      
   </tr>
   <tr>
  <td>ADH</td>
  <td>E1075</td>      
   </tr>
</tbody></table>

首先，我创建了一个小辅助函数 t(tr,I)，它为给定 <tr>.

获取第 i 个单元格的 .textContent

然后我将所有 <tr> 收集到一个数组中（.get() 从 jQuery 对象中提取 DOM 元素的实际数组）和 .sort()它。 sort-callback 函数将首先比较两个给定 <tr> 的第一个单元格（索引=0），并且 - 只有当比较 returns 0 时 - 才会进行第二次比较（查看每个 <tr> 中的第二个单元格）。

即使不在实际 jQuery 构造之外创建任何可见变量或常量，也可以做到这一点。事实上，上面的代码中 jQuery 所剩无几，没有它也可以轻松完成。 ;-)

如何按两列而不是一列对 table 进行排序

How to sort table by two columns instead of one

javascript

html

jquery

css-tables