Question

我有一个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表持有所需的行顺序的ID？
如何制作动画？一世我以为我可以把它写成一个 CSS改为黑客，其中每个表行具有绝对位置我可以运行.animate() 计算出哪个位置后每一行应该成立。思想与我目前的代码？

Answer 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

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

1 个答案: