idioma - fecha jquery

Intercambiar filas en JQuery

Question

Si tengo una tabla como 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 cambiaría las 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

Aquí está el código para intercambiar las filas. Tomemos # Row1 y # Row3

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

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

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

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

Para mover la fila hacia abajo

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

Answer 2

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 3

Aquí hay un ejemplo ligeramente expandido, esperando que lo encuentres útil ... :)

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

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 está moviendo 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);
    });
};

Puedes usarlo de esta manera:

swapTR(sourceTR, targetTR, true);

Answer 5

Estoy usando el plugin de arrastrar y soltar para intercambiar categorías en la tabla (con subcathegories) y después de no trabajar. Insertar después de las obras. tema similar

Answer 6

Lo intentaré:

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

Pero creo que es mejor intercambiar el contenido de las filas en lugar de intercambiar las filas, para que pueda confiar en la numeración. Así,

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

Answer 7

Para mover Row1 un paso hacia abajo, harías:

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

Answer 8

Aquí hay un plugin que arrastra y suelta filas de tablas

Answer 9

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

trabajará