将索引移动到新位置

Question

我有一个具有固定行布局的表.每行都有唯一的标识符.从数据库返回数据时,它对该表中的行具有不同的顺序.返回的数据与固定布局中存在的索引相同,因此我可以在固定表中找到匹配的行.我需要移动固定表布局中的行以匹配数据中的行顺序.

表格布局:

<table>
    <tr id="a1"><td>Some Value1</td></tr>
    <tr id="a2"><td>Some Value2</td></tr>
    <tr id="a3"><td>Some Value3</td></tr>
    <tr id="a4"><td>Some Value4</td></tr>
    <tr id="a5"><td>Some Value5</td></tr>
</table>

因此,如果数据库中的订单是a3,a4,a5,我需要表格看起来像这样.

<table>
    <tr id="a3"><td>Some Value1</td></tr>
    <tr id="a4"><td>Some Value2</td></tr>
    <tr id="a5"><td>Some Value3</td></tr>
    <tr id="a1"><td>Some Value4</td></tr>
    <tr id="a2"><td>Some Value5</td></tr>
</table>

是否可以逐行移动索引,或者如果我克隆行,将其移动到特定的行索引,然后用这样的东西删除旧的行/位置.

var clonedRow = $("#tbl_lp_Forms > tbody > tr[class=" + myformurl + "] ").clone(true);
$('#tbl_lp_Forms tr:first').before(clonedRow);

希望你能帮忙!

Answer 1

首先 - 如果你想要移动行,你不需要克隆它.当你选择一些html元素并将其附加/添加到其他地方时,它将从旧位置移除 - 这就是DOM的工作方式.所以根据你写的html,当你这样做时:

var $table = $('table');
$table.prepend($('#a3'));

那么id为'a3'的行将从其旧位置移除并放在表的开头.

如果我们假设您有要获得订单的数组:

var order = ['a3', 'a4', 'a5', 'a1', 'a2']; 

然后根据这个表对行进行排序,你必须简单地从这个数组中的最后一个元素进行迭代,从表中获取当前id的行,并将它放在开头,如下所示:

var order = ['a3', 'a4', 'a5', 'a1', 'a2']; 
var $table = $('table');        

for (var i = order.length; --i >= 0; ) {
    $table.prepend($table.find('#' + order[i]));
}

当你想要移动一行并放在其他行之前:

var $rowa = $('#a1');
var $rowb = $('#a5');
$rowb.insertBefore($rowa);

// or even like this
$('#a5').insertBefore('#a1');