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?

<tr id="Row1">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>

Answer 1

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

Answer 2

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

will work

Answer 3

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

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

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

Here's another solution.

To move a row down:

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

To move a row up:

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

Answer 6

how does one add effects for the swapping of rows? :P