将 tr 按索引移动到新位置

关键词：

【中文标题】将 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));

【讨论】：

Android 翻译动画 - 使用 AnimationListener 将视图永久移动到新位置

】Android翻译动画-使用AnimationListener将视图永久移动到新位置【英文标题】：Androidtranslateanimation-permanentlymoveViewtonewpositionusingAnimationListener【发布时间】：2013-10-0117:44:05【问题描述】：我有安卓翻译动画。我有一个带有随机生成位... 查看详情

如何在 iPhone 上将目录移动到新位置

】如何在iPhone上将目录移动到新位置【英文标题】：HowtomoveadirectorytoanewlocationoniPhone【发布时间】：2011-01-2411:50:18【问题描述】：这是我的方法，它应该简单地将目录的内容从/someDirectory移动到/addons/id/UUID：CFUUIDRefuuidObj=CFUUIDCreate... 查看详情

如何将 c++/opengl 中的对象移动到新位置并擦除旧对象

】如何将c++/opengl中的对象移动到新位置并擦除旧对象【英文标题】：HowdoImoveanobjectinc++/opengltoanewplaceanderasetheoldobject【发布时间】：2012-03-1017:29:21【问题描述】：我正在用opengl制作吃豆人游戏，我想在由矩阵表示的游戏中移动我... 查看详情

将 UIView 移动到新的超级视图并从 UITableViewCell 再次返回

】将UIView移动到新的超级视图并从UITableViewCell再次返回【英文标题】：MovingUIViewtonewsuperviewandbackagainfromUITableViewCell【发布时间】：2015-04-2013:57:06【问题描述】：我有一个自定义的UITableViewCell，其中有一个自定义的UIView。当有人按... 查看详情

vba将数据移动到新选项卡，排序和小计excel

】vba将数据移动到新选项卡，排序和小计excel【英文标题】：vbatomovedatatonewtab,sortandsubtotalexcel【发布时间】：2018-06-0813:01:41【问题描述】：感谢您的帮助-新手，但正在学习我有一个工作表需要执行以下操作：1.检查每个日期2.将... 查看详情

如何通过使用sqlserver中的detach和attach函数将sqlserver数据库移到新位置

...db‘go然后，将数据和日志文件从当前位置(D:Mssql7Data)复制到新位置(E:Sqldata)。按如下所示重新附加指向新位置中这些文件的数据库：usemastergosp_attach_db‘mydb‘,‘E:Sqldatamydbdata.mdf‘,‘E:Sqldatamydblog.ldf‘go使 查看详情

按索引移动数组中的元素

】按索引移动数组中的元素【英文标题】：Shiftelementsinarraybyindex【发布时间】：2015-10-2116:50:20【问题描述】：给定n个元素的数组，即vararray=[1,2,3,4,5]我可以为Array写一个扩展，这样我就可以修改数组来实现这个输出：[2,3,4,5,1]：mu... 查看详情

永久移动 POST 请求

】永久移动POST请求【英文标题】：MovedPOSTrequestpermanently【发布时间】：2018-09-1404:20:49【问题描述】：我们的移动应用程序使用POST请求来检查其状态。我们需要将此服务迁移到新位置。我们使用新端点发布了新版本的移动应用程... 查看详情

将单元格范围复制到新位置(代码片段)

...我不起作用，因为它没有将整个单元格值范围从当前位置移动到A1。请指教。Range("E:E").CutRange("A1")例，如果E中的范围是50行，则切割和移动应从A1开始并在A50结束。如果E中的范围是999行，则剪切和移动应从A1开始并在A999结束。答... 查看详情

Pandas - 使用列中的值作为索引将现有列中的值提取到新列中

】Pandas-使用列中的值作为索引将现有列中的值提取到新列中【英文标题】：Pandas-Usingvaluefromacolumnasanindextoextractvaluefromanexistingcolumnintoanewcolumn【发布时间】：2022-01-2301:29:04【问题描述】：Datframe如下所示。我想添加另一列“newcol... 查看详情

如何不按位置而是按表sqlite中的_id切换到新Activity

】如何不按位置而是按表sqlite中的_id切换到新Activity【英文标题】：HowtoswitchtoanewActivitynotbyposition,butby_idinthetablesqlite【发布时间】：2020-02-0514:13:32【问题描述】：你好。有一个表格，其中的数据按位置显示在ListView中。一切都很... 查看详情

索引排序

索引排序在排序时，若是数据非常复杂。对数据的移动显然是费时的。若把数据移动改为索引(或指针)移动。则降低了操作复杂度。索引排序。也叫地址排序，就是这样的排序思想。索引含义依据索引的含义不同，索引排序的算... 查看详情

将 udf 调用移动到新函数后的 azure pyspark udf 属性 nonetype

】将udf调用移动到新函数后的azurepysparkudf属性nonetype【英文标题】：azurepysparkudfattributenonetypeaftermovingudfcallintonewfunction【发布时间】：2021-01-0714:05:41【问题描述】：我从下面的一系列工作udf开始，以清理按预期工作的数据框中的... 查看详情

通过跳跃将 UIView 移动到 x 位置

】通过跳跃将UIView移动到x位置【英文标题】：MoveUIViewinxpositionwithjumps【发布时间】：2013-11-2214:00:32【问题描述】：我需要你的帮助。我正在尝试将我的视图移动到x位置。当我为此使用普通的UIView动画时，视图将从一个x移动到另... 查看详情

如何让 jQuery 从最后一个位置动画到新位置？

...测试了以下代码。Firefox完美运行（根据当前位置将元素移动到新位置），但IE失败。它总是获取原始位置，然后动画到所需位置。Firefox方式是我希望它工作的方式（ 查看详情

如何使用 AS3 使 scrollPane 内的 MovieClip 移动到新位置？

】如何使用AS3使scrollPane内的MovieClip移动到新位置？【英文标题】：HowdoyoumakeaMovieClipinsideascrollPanemovetoanewlocationusingAS3?【发布时间】：2021-04-1218:50:57【问题描述】：我有一个MC，它是一个列表，它位于一个滚动窗格中。我想通过单... 查看详情

MongoDB 将所有现有索引迁移到新数据库

】MongoDB将所有现有索引迁移到新数据库【英文标题】：MongoDBMigrateallexistingindexestonewdatabase【发布时间】：2018-04-1002:53:35【问题描述】：我有一个MongoDB开发集群，作为开发改进的一部分，我会随着时间的推移创建索引。在测试/生... 查看详情

数据存储结构

...队列①先进先出②出队③入队1.3数组①查找元素快：通过索引，可以快速访问指定位置的元素②增删元素慢：???指定索引位置增加元素：需要创建一个新数组，将指定新元素存储在指定索引位置，再把原数组元素根据索引，复制... 查看详情