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

Answer 1

遍历所有行并获取金额字段中的值，然后对数组进行排序并替换新顺序中的所有行：

{{1}}

Answer 2

还有一个解决方案。在此处替换索引comparer(3)以按其他列排序。（注意：基于0的索引）

var table =  $('table');   
var rows = table.find('tr:gt(0)').toArray().sort(comparer(3)) ;     
for (var i = 0; i < rows.length; i++) {
  table.append(rows[i])
}

function comparer(index) {  
  return function(a, b) {      
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);    
    return $.isNumeric(valA) && $.isNumeric(valB) ?  valA - valB  : valA.localeCompare(valB)  
  }
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</table>

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

2 个答案: