Intercambio de filas en JQuery

Question

Si tengo una tabla como la que se muestra a continuación, y tengo una flecha hacia arriba y hacia abajo que mueve las filas hacia arriba y hacia abajo, ¿cómo podría intercambiar filas en 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")); 

trabajará

Answer 2

Here's a plugin que hace arrastrar y soltar filas de la tabla

Answer 3

Para mover ROW1 un paso hacia abajo, que haría:

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

Answer 4

me gustaría probar :

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

Pero supongo que es mejor intercambiar el contenido de las filas en lugar de intercambiar las filas, para que pueda contar con la numeración. Por lo tanto,

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

Answer 5

Aquí hay otra solución.

Para mover una fila hacia abajo:

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

Para mover una fila hacia arriba:

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

Answer 6

estoy usando arrastrar y soltar plug-in para establecerán categorías de intercambio en la tabla (con subcathegories), y después de no trabajando. InsertAfter works. similiar topic

Answer 7

Aquí está un ejemplo un poco ampliado, con la esperanza de que será de gran utilidad ... :)

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

Este es el código para intercambiar las filas. Deja la toma # ROW1 y # Row3

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

El clon (verdadero) se utiliza para que los eventos también se tienen en cuenta.

Si desea mover la fila hacia arriba y hacia abajo, utilice este código. Para mover fila UP

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

Para mover fila hacia abajo

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

Answer 9

Esta es una función genérica que tiene 3 parámetros: fila de origen, fila de destino y un valor booleano que indica si la fila se mueve hacia arriba o hacia abajo .

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

Usted puede usarlo de esta manera:

swapTR(sourceTR, targetTR, true);