javascript - 在页面加载 jQuery/Javascript 时按 .class 对表行进行排序

Question

我的 HTML 表格中有一个表格单元格，其中包含信息 - 其中信息是价格(类 .amount)。我想在页面加载时使用 jQuery 按该类对表行进行排序。

示例。

<table>
<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">10</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">40</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">30</span></td>
</tr>

<tr>
    <td>data</td> <td>data</td> <td>data</td> <td>info info html <span class="amount">16</span></td>
</tr>

etc

我不需要客户端表排序。我只是希望为用户预先安排表格，所以我不想使用库。

如果您想查看相关页面，请使用流行的移动用户代理并访问http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-a3-black-deals/在契约(Contract)选项卡下。

Answer 1

循环遍历所有行并获取 amount 字段中的值，然后对数组进行排序并按新顺序替换所有行:

$(document).ready(function(e) {
  var dataRows = [];

  //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
  $('tr').each(function(i,j) {
    dataRows.push({'amount': parseFloat($(this).find('.amount').text().replace(/[^\d\.\-]/g, '')), 'row': $(this)});
  })

  //Sort the data smallest to largest
  dataRows.sort(function(a, b) {
   return a.amount - b.amount;
  });

  //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).
  $('table').empty();

  //Add rows back to table in the correct order.
  dataRows.forEach(function(ele) {
    $('table').append(ele.row);
  })
})