jQuery排序自定义表格答案

【问题标题】：jQuery sort custom tablejQuery排序自定义表格
【发布时间】：2014-08-10 03:54:40
【问题描述】：

我正在编写一个小用户脚本来对表格进行排序，但是表格的结构确实很奇怪。我想要做的是添加一个额外的排序功能，以便我可以对人员的排名 (#) 进行排序。

表格数据如下所示：

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

控制台中的输出是一个包含所有排名的正确排序的数组，我只是不知道如何交换相应的<tr>，以便表格以正确的方式重建。寻找任何提示或指示！

【问题讨论】：

你试过了吗：tablesorter.com/docs
HTML 看起来无效，href 属性未关闭，看起来您多次使用同一个 ID，并且 ID 是唯一的。从有效的 HTML 开始，事情会变得更容易。此外，sort 直接在 jQuery 集合上工作，无需推送到数组，但您已将表格以正确的顺序附加到 DOM 中以查看任何更改。
虽然可以通过遍历所有<TR> DOM 元素并在<TABLE> 元素中实际移动它们来解决您的问题，但这是一个坏主意。移动 DOM 元素意味着首先将其从 DOM 中移除，然后再将其插入到其他位置。 Have a look at jQuery manipulation commands。 DOM 操作是一项非常昂贵的操作，您实际上不需要查看页面上的中间状态。正如 John 和 adeneo 所提到的，有更好的方法。

标签： javascript jquery html sorting

【解决方案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());

【讨论】：