根据给定的行 ID 数组使用 jQuery 重新排列 HTML 表格答案

【问题标题】：Re-arrange an HTML table with jQuery based on a given array of row IDs根据给定的行 ID 数组使用 jQuery 重新排列 HTML 表格
【发布时间】：2011-07-06 22:13:39
【问题描述】：

我有一个 HTML 表格，其中每个数据行都有一个唯一的 id 属性。我正在编写一个脚本来轮询服务器的数据并使用它获得的结果对表进行重新排序。从服务器，我收到一个这样的数组：

var order_arr = [6, 4, 2, 1, 5, 3]

我想用它来直观地重新排序一些表数据，如下所示：

<tr id="user-1">...</tr>
<tr id="user-2">...</tr>
<tr id="user-3">...</tr>
<tr id="user-4">...</tr>
<tr id="user-5">...</tr>
<tr id="user-6">...</tr>

让用户看起来像这样：

<tr id="user-6">...</tr>
<tr id="user-4">...</tr>
<tr id="user-2">...</tr>
<tr id="user-1">...</tr>
<tr id="user-5">...</tr>
<tr id="user-3">...</tr>

我写了一些jQuery code on jsFiddle 来做到这一点，但我不知道这是否是最好的技术。它获取<tr> 元素的数组，并根据每行ID 的相应索引对它们进行排序。它以 .html() 调用结束，它只是替换了整个表格正文内容。

所以.. tl;博士：

this code是视觉上最好的方式吗在给定数组的情况下重新排序 HTML 表格保持所需的行顺序身份证？
如何制作动画？一世在想我可以把它写成取而代之的是 CSS hack，其中每个表格行有一个绝对位置我可以运行.animate() 在计算出哪个位置之后每一行都应该持有。想法vs. 我当前的代码？

【问题讨论】：

表格真的需要在dom中排序还是只是视觉排序？
它可以只是视觉排序，这很好。这就是我对 CSS 动画想法的想法。抱歉，我现在意识到以这种方式解释可能会给出错误的信息。
这是我的 CSS 排序思路：jsfiddle.net/hans/6qVf5/3

标签： jquery sorting html-table jquery-ui-sortable

【解决方案1】：

我能找到的保留原始功能并添加动画的最佳解决方案是使用 CSS。这是相关的JS：

function sort(order_arr) {
    var top = 0;    
    $.each(order_arr, function(idx, val) {
        var el = $('tbody tr#user-' + val);

        el.animate({
            position: 'absolute',
            top: top + 'px'
        }, 400);
        top += el.outerHeight();
    });
}

Demo on jsFiddle

【讨论】：