Перемещение строк в JQuery

Question

Если у меня есть таблица, как показано ниже, а также стрелка вверх и вниз, которая перемещает строки вверх и вниз, как мне пойти на замену строк в JQuery?

<tr id="Row1"> 
    <td>Some label</td> 
    <td>Some complex control</td> 
</tr> 
<tr id="Row2"> 
    <td>Some label</td> 
    <td>Some complex control</td> 
</tr> 
<tr id="Row3"> 
    <td>Some label</td> 
    <td>Some complex control</td> 
</tr> 

Answer 1

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

будет работать

Answer 2

Here's a plugin, что делает сопротивление и падение строки таблицы

Answer 3

Чтобы переместить Row1 один шаг вниз, вы могли бы сделать:

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

Answer 4

Я хотел бы попробовать :

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

Но я думаю, что лучше менять содержимое строк вместо того, чтобы сами менять строки, чтобы вы могли полагаться на нумерацию. Таким образом,

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

Answer 5

Вот еще одно решение.

Чтобы переместить строку вниз:

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

Чтобы переместить строку вверх:

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

Answer 6

Я использую перетащить плагин для подкачки срезании в таблице (с subcathegories), и после того, как не за работой. insertAfter работает. similiar topic

Answer 7

Вот несколько расширен пример, надеясь, что вы найдете его полезным ... :)

$('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 8

Вот код, чтобы поменять местами строки. Позволяет принимать # Row1 и # Row3

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

клон (правда) используется так, что события, также принимаются во внимание.

Если вы хотите перемещать строку вверх и вниз, используйте этот код. Чтобы переместить строку ВВЕРХ

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

Чтобы переместить строку вниз

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

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