在JQuery中交换行

如果我有一个如下所示的表，并且有一个向上和向下移动行的箭头，我将如何在JQuery中交换行？

 Some label Some complex control   Some label Some complex control   Some label Some complex control  

Answer 1

 $("#Row1").after($("#Row2")); 

将工作

Answer 2

这是另一种解决方案。

要向下移动一行：

 jQuery("#rowid").next().after(jQuery("#rowid")); 

要向上移动一行：

 jQuery("#rowid").prev().before(jQuery("#rowid")); 

Answer 3

这是一个稍微扩展的例子，希望你会发现它很有用…… 🙂

 $('table').on('click', '.move-up', function () { var thisRow = $(this).closest('tr'); var prevRow = thisRow.prev(); if (prevRow.length) { prevRow.before(thisRow); } }); $('table').on('click', '.move-down', function () { var thisRow = $(this).closest('tr'); var nextRow = thisRow.next(); if (nextRow.length) { nextRow.after(thisRow); } }); 

Answer 4

这是一个拖放表行的插件

Answer 5

要将Row1向下移动一步，您需要执行以下操作：

 $me = $("#Row1"); $me.after($me.nextSibling()); 

Answer 6

这是交换行的代码。 让我们走＃Row1和＃Row3

 $('#Row1').replaceWith($('#Row3').after($('#Row1').clone(true))); 

使用克隆（true）以便也考虑事件。

如果要上下移动行，请使用此代码。 向上移动行

 var tableRow = $("#Row1"); tableRow.insertBefore(tableRow.prev()); 

要向下移动行

 var tableRow = $("#Row1"); tableRow.insertAfter(tableRow.next()); 

Answer 7

我会尝试：

 var tmp = $ ('#Row1') $ ('#Row1').remove $ ('#Row2').after ($ ('#Row1')) 

但我想最好交换行的内容而不是自己交换行，这样你就可以依赖编号了。 从而，

 var tmp = $ ('#Row1').html () $ ('#Row1').html ($ ('#Row2').html ()) $ ('#Row2').html (tmp) 

Answer 8

我在表中使用拖放插件（带有subcathegories），并且在不工作之后使用拖放插件。 插入后工作。 类似的话题

Answer 9

这是一个具有3个参数的通用函数：源行，目标行和指示行是向上还是向下移动的布尔值。

 var swapTR = function (sourceTR, targetTR, isBefore) { sourceTR.fadeOut(300, function () { sourceTR.remove(); if (isBefore) { targetTR.before(sourceTR); } else { targetTR.after(sourceTR); } sourceTR.fadeIn(300); initializeEventsOnTR(sourceTR); }); }; 

你可以这样使用它：

 swapTR(sourceTR, targetTR, true);