使用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部件.因此,仅仅针对其中的<tr>元素可能很方便tbody(尽管这不是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;