Swapping rows in JQuery

Here's another solution.

To move a row down:

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

To move a row up:

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

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

will work


Here's a slightly expanded example, hoping you will find it useful... :)

$('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);
    }
});

Here is the code to swap the rows. Lets take #Row1 and #Row3

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

The clone(true) is used so that events are also taken into account.

If you want to move row up and down then use this code. To move row UP

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

To move row DOWN

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

Tags:

Jquery