2

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

<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>

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

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);
});

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

另外，如果您可以指导我制作一个按钮，让表格再次按原始顺序排列，那就太棒了。

谢谢。

4

1 回答 1

5

您需要将文本值转换为数字以进行正确的数字排序。转换的简单方法是使用一元加运算符。

要将标题行保留在适当的位置，只需不要将其包含在您排序的数组中，这很容易使用 jQuery 的.slice()方法。

要添加一个将表格恢复到其原始顺序的按钮，只需在排序之前保留数组的副本，我已经使用标准Array.slice()方法完成了。

所以：

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/

于 2012-10-28T20:21:14.443 回答