将 tr 按索引移动到新位置

Posted 2023-03-05

【中文标题】将 tr 按索引移动到新位置

【英文标题】：Move tr by index to a new position

【发布时间】：2012-01-06 10:06:36

【问题描述】：

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

表格布局：

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

希望你能帮忙！

【参考方案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');

【参考方案2】：

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

【讨论】：

@drrcknisn 实际上不需要排序，我只需要按行索引移动行。所以如果我有 1,2,3,4,5，那么新的顺序是 3,4,5,2,1。

“按行索引移动行”是排序。

行由用户动态移动，因此您不能对字段进行升序或降序排序。该表可以有更多或更少的行。所以我正在寻找的只是如何交换行。

表格设计未以自上而下的格式存储。表格设计成一行，然后解析构建布局，所以不能在服务器端排序。

当然可以存储行的排序顺序。如果用户将第 1 行放在第 3 位置，则当用户保存行/布局/任何内容时，您只需将排序位置存储在数据库的列中。当检索行以再次显示给用户时，只需按此列对结果进行排序，您的行将与用户上次放置它们的顺序相同。我不明白你为什么认为这种方法行不通……

【参考方案3】：

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

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

最佳实践：

为元素（给您的表格）提供 id 添加空标题 在正文中添加 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));