Scambio di righe in JQuery

Question

Se ho una tabella come mostrato di seguito e ho una freccia su e giù che sposta le righe verso l'alto e verso il basso, come faccio a scambiare le righe in 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")); 

funzionerà

Answer 2

Here's a plugin che fa trascinare e rilasciare le righe della tabella

Answer 3

Per spostare Row1 un passo verso il basso, faresti:

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

Answer 4

Vorrei provare :

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

Ma suppongo che sia meglio scambiare il contenuto delle righe invece di scambiare le righe da soli, in modo da poter contare sulla numerazione. Quindi,

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

Answer 5

Ecco un'altra soluzione.

Per spostare una riga verso il basso:

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

Per spostare una riga verso l'alto:

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

Answer 6

Sto usando il drag and drop plug-in per cathegories di swap in tabella (con subcathegories), e non dopo lavoro. insertAfter funziona. similiar topic

Answer 7

Ecco un esempio un po 'ampliato, sperando che lo troverete utile ... :)

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

Ecco il codice per scambiare le righe. Consente di prendere # Row1 e # Row3

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

Il clone (vero) viene utilizzato in modo che gli eventi sono anche presi in considerazione.

Se si desidera spostare la riga su e giù, utilizzare questo codice. Per spostare riga UP

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

Per spostare riga giù

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

Answer 9

Questa è una funzione generica che ha 3 parametri: riga di origine, riga di destinazione e un booleano che indica se la riga è in movimento su o giù .

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

Si può usare in questo modo:

swapTR(sourceTR, targetTR, true);