Question

我正在建立一个数据表，该数据始终根据td中的最大值对行进行排序。

我尝试使用该函数对行进行排序，但随后将新行追加到表中，以便获得复制行。

我这样设置我的表，我需要检查TOT列，该列需要按最高分排序。

$(document).ready(function() {
  sortTable($('#table'), 'asc');
});

function sortTable(table, order) {
  var asc = order === 'asc',
    tbody = table.find('tbody');

  tbody.find('tr').sort(function(a, b) {
    if (asc) {
      return $('td:first', a).text().localeCompare($('td:first', b).text());
    } else {
      return $('td:first', b).text().localeCompare($('td:first', a).text());
    }
  }).appendTo(tbody);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table id="table">
    <tr>
      <th></th>
      <th>POS</th>
      <th>TEAM</th>
      <th>DRIVER</th>
      <th>TOT</th>
    </tr>
    <tbody>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>85</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>100</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>34</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

这是HTML问题。问题是因为您的第一个tr没有包含在thead或tbody中，所以它破坏了table的内容。要解决此问题，请将tr放在thead中：

$(document).ready(function() {
  sortTable($('#table'), 'desc');
});

function sortTable($table, order) {
  var asc = order === 'asc',
    $tbody = $table.find('tbody');

  $tbody.find('tr').sort(function(a, b) {
    if (asc) {
      return $('td:first', a).text().localeCompare($('td:first', b).text());
    } else {
      return $('td:first', b).text().localeCompare($('td:first', a).text());
    }
  }).appendTo($tbody);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table id="table">
    <thead>
      <tr>
        <th></th>
        <th>POS</th>
        <th>TEAM</th>
        <th>DRIVER</th>
        <th>TOT</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>85</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>100</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>34</td>
      </tr>
    </tbody>
  </table>
</div>

还请注意，您正在按字符串值排序，这可能无法给出所需的结果。可能值得在parseInt()的值上使用td来提高排序的可靠性。

Answer 2

要按“ TOT”排序，必须按td:last而不是td:first进行排序。

此后，您必须将其附加到table而不是tbody。

$(document).ready(function() {
  sortTable($('#table'), 'asc');
});

function sortTable(table, order) {
  var asc = order === 'asc',
    tbody = table.find('tbody');

  tbody.find('tr').sort(function(a, b) {
    if (asc) {
      return $('td:last', a).text().localeCompare($('td:last', b).text());
    } else {
      return $('td:last', b).text().localeCompare($('td:last', a).text());
    }
  }).appendTo(table);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table id="table">
    <tr>
      <th></th>
      <th>POS</th>
      <th>TEAM</th>
      <th>DRIVER</th>
      <th>TOT</th>
    </tr>
    <tbody>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>85</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>100</td>
      </tr>
      <tr>
        <td></td>
        <td>1ST</td>
        <td>PROSPORT PERFORMANCE (85)</td>
        <td>ROBERT RENAUER</td>
        <td>34</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

您正在将已排序的行追加到表（.appendTo(tbody)）。相反，您应该使用html代替肢体的子代。

每行的第一个td为空，因此没有可比较和排序的内容。

但是，如果第一个td已填写，您应该可以像下面这样使它工作：

function sortTable(table, order) {
  var asc = order === 'asc';
  var tbody = table.find('tbody');

  var sorted = tbody.find('tr').sort(function(a, b) {
    console.log(a,b)
    if (asc) return $('td:first', a).text().localeCompare($('td:first', b).text());

    return $('td:first', b).text().localeCompare($('td:first', a).text());

  })

  tbody.html(sorted);
}

如何在jQuery中基于td值排序tr

3 个答案: