Swapping rows in JQuery

Question

If I have a table as shown below, and have a up and down arrow that moves rows up and down, how would I go about swapping rows in JQuery?

Answer 1

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 also siables UP in first row and DOWN in last row. You may change it to go on top again if going down in last row. But thats how i've needed it.

Greetings

Answer 2

This is a generic function that has 3 parameters: source row, target row and a boolean indicating 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 use it this way:

swapTR(sourceTR, targetTR, true);

Answer 3

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

Answer 4

I would try:

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

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

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

Answer 5

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

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

Answer 6

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