基于给定的行ID数组，使用jQuery重新排列HTML表

我有一个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>

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

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>

。。。
...
...
...
...
...

因此，在用户看来如下所示：

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>

。。。
...
...
...
...
...

我写了一些这样做，但我不知道这是否是最好的技术。它获取

元素的数组，并根据每行ID的相应索引对它们进行排序。它以一个

.html（）

调用结束，该调用仅替换整个表体内容

所以。。tl；博士：

这是视觉效果最好的方法 在给定数组的情况下对HTML表重新排序 保持所需的行顺序 身份证

我怎样才能使这个动画？我 我在想我可以把它写成一本书 相反，CSS黑客，其中 表行具有绝对位置 我可以直接运行

.animate（）

在计算了哪个位置之后 每一排都应该有。思想vs。 我现在的代码

---

我能找到的保留原始功能和添加动画的最佳解决方案是使用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();
    });
}

---

表实际上需要在dom中排序还是只需要直观排序？可以直观排序，这很好。这就是我的CSS动画想法。抱歉，我现在意识到用这种方式解释可能会给出错误的信息。以下是我的CSS排序想法：