74

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.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Wilco
  • 32,754
  • 49
  • 128
  • 160

2 Answers2

183

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Quintin Robinson
  • 81,193
  • 14
  • 123
  • 132
  • @Quintin : thanks for this. If the tr row style display none, then how can i move the rows to the previous row which is displayed block ? if any one row style is displayed none, then i need to click multiple times to move up or down. any suggestion ? – Paulraj Jun 18 '10 at 06:01
  • 2
    Any suggestions on how to hide the "Up" link for the first row and the "Down" link for the last row? – rboarman Nov 01 '10 at 21:42
  • 1
    @rboarman Something along the lines of `$(".up,.down").show();` then `$("tr:first .up,tr:last .down").hide();` but you might need to tweak the selectors to your exact needs. – Quintin Robinson Nov 01 '10 at 22:20
  • 1
    @paulrajj you can accomplish this by using `prevAll` and `nextAll` in place of `prev` and `next` and passing `:visible:first` as the selector. – Quintin Robinson Nov 01 '10 at 22:22
  • any idea how can I escape the header row (tr th)? else in my situation it will move up to the header row, many thanks – sams5817 Mar 22 '13 at 03:44
  • 2
    I figure out already, share out as following : if ($(this).is(".up")) { row.insertBefore(row.prev("tr:has(td)")); } else { row.insertAfter(row.next()); } – sams5817 Mar 22 '13 at 04:00
  • @QuintinRobinson Is there a way to animate this ? – mrk Dec 06 '15 at 23:59
12
$(document).ready(function () {
   $(".up,.down").click(function () {
      var $element = this;
      var row = $($element).parents("tr:first");

      if($(this).is('.up')){
         row.insertBefore(row.prev());
      } 
      else{
         row.insertAfter(row.next());
      }

  });

});

Try using JSFiddle

Shemeemsha R A
  • 1,416
  • 16
  • 22