Question

我需要使用锚中的数字（某些行中不存在的锚）对表中的行进行排序。表示例：

<table id="sortedtable" class="full">
    <tbody>
        <tr>
            <th>Main tr</th>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Title</div>
                <a class="unreadcount" href="#">7</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">No anchor here :(</div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Javascripthatesme</div>
                <a class="unreadcount" href="#">15</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Yourox</div>
                <a class="unreadcount" href="#">2</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">This has more than one word and no anchor</div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Title</div>
                <a class="unreadcount" href="#">11</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Big Bang Theory is not funny</div>
                <a class="unreadcount" href="#">4</a>
            </td>
        </tr>   
    </tbody>
</table>

使用this question中的解决方案，我能够制作一个半工作代码：

var $table = $('table');

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

您可以在this jsFiddle中看到它正常工作。问题和我需要帮助的地方是数字的排序方式（例如，首先是8或32或12），我需要忽略第一行（“Main tr”所在的位置）并将其始终保持在顶部。

作为一个额外的，如果你可以给我一个方向来制作一个按钮，将表再次放入原始顺序将是很棒的。

感谢。

Answer 1

您需要将文本值转换为数字才能进行正确的数字排序。转换的简易方法是使用unary plus operator。

要保留标题行，只是不要在排序的数组中包含它，这很容易使用jQuery的.slice() method。

要添加将表恢复为原始顺序的按钮，请在排序之前保留数组的副本，这是我使用标准Array .slice() method完成的。

所以：

var $table = $('table');

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

// button that changes it back:
$("input").click(function(){
    $.each(originalRows, function(index, row) {
       $table.children('tbody').append(row);
    });
});

演示：http://jsfiddle.net/hLvwz/5/

jQuery，使用子元素中的数字排序表中的行

1 个答案: