Question

我有一个表，通过点击标题字段进行排序，另一个表是不是。如果订单是一个因素，正在工作的表位于不排序的表之前。

第一张表排序，第二张表没有。

＆＃13;

$('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);
    });
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

当您执行th

时，问题出在$('th').each(function(col)索引中

col是页面中所有th的索引，在单元格排序中编制索引时效果不佳

以下方法有效

$('table').each(function(col) {
   var sortOrder
  $(this).find('th').click(function() {
    var col = $(this).index()
   // all same after this

建议您通过缓存$(this)，$th，$table等的变量来摆脱对$siblings的重复调用

请注意，您也可以在没有each

的情况下追加整个数组

的 DEMO

Answer 2

col返回的.each索引对于第二个表格是错误的...
由于该索引基于整个页面的th集合，因此无论它在哪个表中。

所以用你的函数包装你的函数：

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

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

Updated Fiddle

Answer 3

不需要额外的库或插件。你遇到的问题是你有两张桌子，你可以全部行走并将它们的号码保存在col中，所以变量col是0,1,2,3,4,5 在第二个表中，您正在搜索th下的td，它等于您的情况3,4或5中的col。但这些并不存在。您只需要对col变量进行规范化。例如，添加：

arrData.sort(function(a, b) {
   col = col >= 3 ? col-3 : col; // add this line
   var val1 = $(a).find('td').eq(col).text().toUpperCase();
   var val2 = $(b).find('td').eq(col).text().toUpperCase();
   ....

此处更新了小提琴：https://jsfiddle.net/gyfoousf/15/

jQuery数组排序仅适用于DOM

3 个答案: