Как использовать jquery, как изменить порядок строк в таблице на основе атрибута TR?

У меня есть таблица со строками, подобными следующей. Эти строки время от времени обновляются с помощью 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>

Ответы

Ответ 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/

Ответ 2

Спасибо, Кай. Я немного переделал код, сохраняя ясность. Как правило, вы не хотите сортировать THEAD или TFOOTER, поэтому может быть полезно просто нацеливать TRs в TBODY (хотя это не было в оригинальном вопросе Криса):

    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;