How to move a <tr> up or down within <table> via jQuery?

Question

What's the elegant way to do this?

Answer 1

Maybe this link would help you a bit: http://stackoverflow.com/questions/444801/move-x-number-of-rows-in-a-table-using-jquery

Regards, Paul

Answer 2

HTML:

<table id="t1">
    <tr>
     <td>abc</td>
    </tr>
    <tr>
     <td>efg</td>
    </tr>
</table>

Javascript (jQuery):

var row0 = $('#t1 tr:eq(0)');
$('#t1 tr:eq(1)').after(row0.contents());
row0.remove();

Answer 3

I would assign IDs to all my <tr>s.

Answer 4

Here's a quick plugin I wrote for you. Call it on a table, and give it the the old row and the new row position.

$.fn.extend({ 
  moveRow: function(oldPosition, newPosition) { 
    return this.each(function(){ 
      var row = $(this).find('tr').eq(oldPosition).remove(); 
      $(this).find('tr').eq(newPosition).before(row); 
    }); 
   } 
 }); 

$('#myTable').moveRow(4, 3);

Here's an example on jsbin: http://jsbin.com/uroyi

Answer 5

Here are two javascript functions that will do the job:

 function MoveRowDown(tableId, index)
 {
  var rows = $("#" + tableId + " tr");

  rows.eq(index).insertAfter(rows.eq(index + 1));
 }

 function MoveRowUp(tableId, index)
 {   
  var rows = $("#" + tableId + " tr");

  rows.eq(index).insertBefore(rows.eq(index - 1));
 }

Answer 6

Alex's answer works great, but found one issue, if you move something to the very end of the list, it can't insert it. Here's a slightly tweaked version that fixes it...

$.fn.extend({
    moveRow: function (oldPosition, newPosition) {
        return this.each(function () {
            var row = $(this).find('tr').eq(oldPosition).detach();
            if (newPosition == $(this).find('tr').length) {
                $(this).find('tr').eq(newPosition - 1).after(row);
            }
            else {
                $(this).find('tr').eq(newPosition).before(row);
            }
        });
    }
});