javascript - jQuery 数组排序仅适用于 DOM 中的第一个表元素

Question

我有一个表格正在通过单击标题字段进行排序，而另一个表格则没有。如果顺序是一个因素，则工作表位于未排序的表之前。

第一个表排序，第二个表不排序。

jsfiddle

$('th').each(function(col) {

  $(this).click(function() {
    if ($(this).is('.asc')) {
      $(this).removeClass('asc');
      $(this).addClass('desc selected');
      sortOrder = -1;
    } else {
      $(this).addClass('asc selected');
      $(this).removeClass('desc');
      sortOrder = 1;
    }
    $(this).siblings().removeClass('asc selected');
    $(this).siblings().removeClass('desc selected');
    var arrData = $(this).closest('table').find('tbody > tr:has(td)').get();

    arrData.sort(function(a, b) {
      //console.log(a, b);
      var val1 = $(a).find('td').eq(col).text().toUpperCase();
      var val2 = $(b).find('td').eq(col).text().toUpperCase();
      if ($.isNumeric(val1) && $.isNumeric(val2))
        return sortOrder == 1 ? val1 - val2 : val2 - val1;
      else
        return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
    });
    //$(this).closest('tbody tr').remove()
    $.each(arrData, function(index, row) {
      //console.log(row);
      $(this).closest('tbody').append(row);
    });
  });
});

table {
  border: none !important;
}

table th {
  border: none !important;
}

table td {
  border: none;
}

table thead th {
  font-weight: bold;
}

table thead tr td {
  padding-right: 2em;
}

table tbody {
  font-variant-numeric: tabular-nums;
  font-weight: normal;
}

table th,
table td {
  padding: 10px;
}

table tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.1);
}

table thead tr th:hover {
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  font-weight: bold;
}

.selected {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table id="leaderboard">

  <thead>

    <tr>

      <th>Position</th>
      <th>Name</th>
      <th>Duration</th>

    </tr>

  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Test</td>
      <td>00:15:00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Joe Bloggs</td>
      <td>01:00:13</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Joe Bloggs</td>
      <td>03:00:00</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Joe Bloggs</td>
      <td>08:00:00</td>
    </tr>
  </tbody>

</table>

<table id="leaderboard2">

  <thead>

    <tr>

      <th>Position</th>
      <th>Name</th>
      <th>Duration</th>

    </tr>

  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>Bob</td>
      <td>00:17:52</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Joe Bloggs</td>
      <td>00:20:35</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Alice</td>
      <td>23:19:18</td>
    </tr>
  </tbody>

</table>

Answer 1

.each 返回的 col 索引对于第二个表是错误的...
由于该索引基于整个页面的 th 集合，而不管它所在的表。

所以用以下代码包装你的函数:

$("table").each(function(){

然后使用 $(this).find('th').each(function(col) {.
其余不变。

Updated Fiddle