按索引将 tr 移动到新位置

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');

Answer 2

为什么要在 JS 中进行排序？只需在保存时将排序顺序保存在数据库中，然后在返回时选择要显示的数据时 ORDER BY 该列即可。您可以通过将索引放入 1:M 表并将其连接到主数据表来对其进行规范化，也可以将其存储为在主数据表本身中带有分隔符的非规范化字符串（不推荐）。

Answer 3

您的问题是针对按索引的。
如果按索引很重要：

var row =$('table > tr').eq(indexOfTrYouWantToMove);
row.insertAfter($('table > tr').eq(indexOfTrAfterWhichToMove));

最佳实践：

1. 为元素提供id（到您的表）
2. 添加空thead
3. 在tbody中添加tr，

因此您的示例将是：

<table id="tbl1">
    <thead></thead>
    <tbody>
        <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>
    </tbody>
</table>

var row =$('#tbl1 > tbody > tr').eq(indexOfTrYouWantToMove);
row.insertAfter($('#tbl1 > tbody > tr').eq(indexOfTrAfterWhichToMove));