jquery表排序一次

Question

如何订购这样的表：

Group pos
b     2
c     1
b     1
a     1

到此：

Group pos
a     1
b     1
b     2
c     1

用jquery？

表格不 可排序。

我只想对行进行一次排序，我想订购两列。

Answer 1

您可以使用 sort() 对表格进行排序

$('tbody tr').sort(function(a, b) {
  var td1 = $(a).find('td'),
    td2 = $(b).find('td');
  // condition for sort - compare with first column if they are equal then compare with second column
  return (td1.eq(0).text() > td2.eq(0).text() || (td1.eq(0).text() == td2.eq(0).text() && td1.eq(1).text() > td2.eq(1).text())) || 0;
}).appendTo('table tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        Group</th>
      <th>pos</th>
      <tr>
  </thead>
  <tbody>
    <tr>
      <td>
        b
      </td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        c
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        b
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        a
      </td>
      <td>1</td>
    </tr>
  </tbody>
</table>

或者

$('tbody tr').sort(function(a, b) {
  var td1 = $(a).find('td'),
    td2 = $(b).find('td');
  // condition for sort - compare with first column if they are equal then compare with second column
  if (td1.eq(0).text() > td2.eq(0).text() || (td1.eq(0).text() == td2.eq(0).text() && td1.eq(1).text() > td2.eq(1).text()))
    return 1;
  else if (td1.eq(0).text() < td2.eq(0).text() || (td1.eq(0).text() == td2.eq(0).text() && td1.eq(1).text() < td2.eq(1).text()))
    return -1;
  return 0;
}).appendTo('table tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        Group</th>
      <th>pos</th>
      <tr>
  </thead>
  <tbody>
    <tr>
      <td>
        b
      </td>
      <td>2</td>
    </tr>
    <tr>
      <td>
        c
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        b
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        a
      </td>
      <td>1</td>
    </tr>
  </tbody>
</table>