使用jquery，如何根據TR屬性重新排序表中的行？

Question

我有一個表格，其行類似於以下內容。 這些行通過jquery調用不時更新。 使用jquery，我將如何根據myAttribute值構造一個重新排序這些表行的函數，將最高的myAttribute值行放在頂部，將myAttribute值最低的行放在底部？ 表中最多可以有100行。

<tr id='1' class='playerRow' myAttribute=5>
      <td> One</td>
      <td> Two</td>
</tr>
<tr id='2' class='playerRow' myAttribute=6>
      <td> One</td>
      <td> Two</td>
</tr>

Answer 1

<table>  
<tr id='1' class='playerRow' myAttribute='1'>
      <td> One1</td>
      <td> Two1</td>
</tr>
<tr id='2' class='playerRow' myAttribute='2'>
      <td> One2</td>
      <td> Two2</td>
</tr>
</table>

JQuery的

var $table=$('table');

var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('myAttribute');
var keyB = $(b).attr('myAttribute');
if (keyA < keyB) return 1;
if (keyA > keyB) return -1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});

工作演示是http://www.jsfiddle.net/HELUq/1/

Answer 2

謝謝，凱。 我在保持清晰度的同時提煉了一些代碼。 通常，您不希望對thead或tfooter部件進行排序。 因此，僅僅定位tbody的<tr>元素可能很方便（盡管這不是Chris的原始問題）：

    var tb = $('tbody');
    var rows = tb.find('tr');
    rows.sort(function(a, b) {
        var keyA = $(a).attr('myAttribute');
        var keyB = $(b).attr('myAttribute');
        return keyA - keyB;
    });
    $.each(rows, function(index, row) {
        tb.append(row);
    });

要按降序排序，只需按如下方式反轉返回行：

        return keyB - keyA;