Question

79

How to move table row in jQuery?

rated 0 times [ 84] [ 5] / answers: 1 / hits: 104134 / 15 Years ago, thu, october 15, 2009, 12:00:00

Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?

There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

andreguym

Add To Favorites

Follow

Total Points: 125

Total Questions: 112

Total Answers: 103

Location: Wallis and Futuna

Member since Tue, Mar 30, 2021

3 Years ago

andreguym questions

1 Cant run cypress tests in Chrome & Edge browsers(being manageed by organization)

Sun, Dec 5, 21, 00:00, 3 Years ago

1 Bootstrap5 modal not showing

Fri, May 14, 21, 00:00, 3 Years ago

1 Kick/disconnect someone from voice chat in discord

Sun, Apr 4, 21, 00:00, 3 Years ago

1 TypeError(Super expression must either be null or a function) - when App is a class instead of a function

Sat, Apr 3, 21, 00:00, 3 Years ago

1 tooltip to work for mouse hover and click both - ngbootstrap

Wed, Mar 17, 21, 00:00, 3 Years ago

View All

answered 15 Years ago rylee · Accepted Answer

You could also do something pretty simple with the adjustable up/down..

given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.

$(document).ready(function(){

    $(.up,.down).click(function(){

        var row = $(this).parents(tr:first);

        if ($(this).is(.up)) {

            row.insertBefore(row.prev());

        } else {

            row.insertAfter(row.next());

        }

    });

});

HTML:

<table>

    <tr>

        <td>One</td>

        <td>

            <a href=# class=up>Up</a>

            <a href=# class=down>Down</a>

        </td>

    </tr>

    <tr>

        <td>Two</td>

        <td>

            <a href=# class=up>Up</a>

            <a href=# class=down>Down</a>

        </td>

    </tr>

    <tr>

        <td>Three</td>

        <td>

            <a href=# class=up>Up</a>

            <a href=# class=down>Down</a>

        </td>

    </tr>

    <tr>

        <td>Four</td>

        <td>

            <a href=# class=up>Up</a>

            <a href=# class=down>Down</a>

        </td>

    </tr>

    <tr>

        <td>Five</td>

        <td>

            <a href=# class=up>Up</a>

            <a href=# class=down>Down</a>

        </td>

    </tr>

</table>

Demo - JsFiddle