jQuery排序自定義表

Question

我正在使用一個小的用戶腳本來對表進行排序，但是表的結構確實很奇怪。 我想做的是添加一個額外的排序功能，以便我可以對人員的排名（＃）進行排序。

表數據如下所示：

<table id="outer">
    <tr>
        <td><div id="bgn"></div></td>
        <td><a href="#">User 1</a></td>
        <td>
            <table id="inner">
                <tbody>
                    <tr>
                        <td>Rank</td>
                        <td id="tdp">#28</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <!-- more rows -->
</table>

還有一些其他的<td> ，但它們現在並不重要。 大約有52行，但是這些行當然可以有所不同。

我有當前的jQuery代碼：

jQuery( document ).ready(function() {
    var rankings = [];

    $(document).on('click', '#tdr', function() {
    // skipping first line because it's the header

    $('tr:not(:first-child').each(function () {
        var rank = $(this).find('#tdp').text();
        var rank2 = rank.substring(1, rank.length)
        rankings.push(rank2);
    });

        console.log(rankings.sort(sortNumber));
    });

    function sortNumber(num1, num2) {
        return num1 - num2;
    }
});

JS Bin示例

控制台中的輸出是具有所有排名的正確排序數組，我只是不知道如何也交換相應的<tr> ，以便表get正確地重建。 尋找任何提示或指示！

Answer 1

該建議不是真正地對行進行“排序”，而是使用已排序的行重新構建表。 但這應該可以完成工作：

rankings = rankings.sort(sortNumber);
var table = $('<table></table>');
for (var i = 0; i < rankings.length; i++) {
  var row = $('tr').filter(function() {
    var rank = $(this).find('#tdp').text();
    return rank.substring(1, rank.length) == i;
  });
  table.append(row);
}
$('#originalTable').html(table.html());