[ACCEPTED]-Swapping rows in JQuery-jquery

Here's another solution.

To move a row down:

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

To 1 move a row up:

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

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

will work

0

Here's a slightly expanded example, hoping 1 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 4 take #Row1 and #Row3

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

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

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

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

To move row DOWN

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

Here's a plugin that does drag and drop table rows

0

To move Row1 one step down, you'd do:

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

0

I would try:

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

But I guess it’s better to swap 2 rows’ contents instead of swapping rows 1 themselves, so that you can rely on numbering. Thus,

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

I am using drag and drop plugin for swap 2 cathegories in table (with subcathegories), and 1 after not working. insertAfter works. similiar topic

This is a generic function that has 3 parameters: source 3 row, target row and a boolean indicating 2 if the row is moving up or down.

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

You can 1 use it this way:

swapTR(sourceTR, targetTR, true);

I usally do something like this:

<table id="mytable">
    <tr>
        <td>-------------ROW 1-----------</td>
        <td><input type="button" value="↑" class="move up" disabled /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>-------------ROW 2-----------</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>-------------ROW 3-----------</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>-------------ROW 4-----------</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" disabled /></td>
    </tr>
</table>
<script>
    $('#mytable input.move').click(function() {
        var row = $(this).closest('tr');
        if ($(this).hasClass('up')){
            row.prev().before(row);
        }

        else{
            row.next().after(row);
        }            

        $(this).closest('table').find('tr:first').find('td:eq(1) input').prop('disabled', true);
        $(this).closest('table').find('tr:last').find('td:eq(2) input').prop('disabled', true );
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(1) input').prop('disabled', false);
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(2) input').prop('disabled', false);
    });
</script>

Editor Example

So this 4 also siables UP in first row and DOWN in 3 last row. You may change it to go on top 2 again if going down in last row. But thats 1 how i've needed it.

Greetings