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元素可能很方便（尽管这不是克里斯的原始问题）：

    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;

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

2 个答案: