jQuery 按 1 个 td 的值对表行进行排序

Question

您将如何按我拥有的 pts 类对该表进行排序:

<table>
    <tr>
        <th>rank</th>
        <th>team</th>
        <th>pts</th>
    </tr>
    <tr>
        <td>1.</td>
        <td>Chelsea</td>
        <td class="pts">3</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>Arsenal</td>
        <td class="pts">1</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Man U</td>
        <td class="pts">2</td>
    </tr>
</table>

<button>SORT</button>

代码: http://jsfiddle.net/dxL8b2k0/

Answer 1

为了获得有效的表格，您应该使用 thead 元素包装第一个 tr，并使用 tbody 包装其他 tr 元素。要对 tr 进行排序，您可以使用 sort 方法:

$('tbody > tr').sort(function (a, b) {
    return +$('td.pts', b).text() > +$('td.pts', a).text();
}).appendTo('tbody');

要更新排名单元格，您可以使用 text 方法:

$('tbody > tr').sort(function (a, b) {
    return +$('td.pts', b).text() > +$('td.pts', a).text();
}).appendTo('tbody').find('td:first').text(function(index) {
    return ++index + '.';
});