How to move a up or down within via jQuery?

Asked Dec 04 '09 at 08:22

Active Feb 28 '13 at 08:18

Viewed 1.5k times

4

What's the elegant way to do this?

jquery

asked Dec 04 '09 at 08:22
user198729

61,774

108

250

348

Maybe this link would help you a bit: http://stackoverflow.com/questions/444801/move-x-number-of-rows-in-a-table-using-jquery – Paul Peelen Dec 04 '09 at 08:26

6 Answers6

7

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

answered Dec 04 '09 at 08:44
Alex Sexton

10,401

2

29

41

+1 - very succinct answer. If the `
` has event handlers bound to it, will this plugin preserve them? – Russ CamDec 04 '09 at 08:57

Sorry but it won't. According to the jQuery documentation you will need to do an appendTo directly to preserve the event handlers. http://docs.jquery.com/Manipulation/remove#expr – bang Dec 04 '09 at 09:18

2

I removed my comment above since i was wrong, here's the info I still stand by. Thanks bang, for calling me out. The events will not be saved. I would suggest using $.live() as it would be more efficient for any more than 3+ rows. In the case of live, the events aren't attached directly to the element anyways, so it would work with less-friendly plugin. – Alex Sexton Dec 04 '09 at 09:21

you could also `clone(true)` the row before removing it and then insert the clone. – Russ Cam Dec 04 '09 at 09:44

2

A note for jQuery 1.4.x+ - instead of the `remove` you can use a `detach` and it will keep the events. – Alex Sexton Mar 19 '10 at 04:13

It doesn't work for me when switching the 2nd last row and the last one. use John McMillion update instead – John Rumpel Aug 23 '13 at 13:32

4

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

answered Sep 09 '10 at 02:28
John McMillion

61

4

1

If you want to move it to the top or bottom would be easier, though this would not help you :(

`//lets say you want to avoid/skip table headers and use a tbody var tbody = $('tbody','#table'); //now you want a specific row bring to top $('tr.chieftan',tbody).prependTo(tbody);`

To move from a specific index, to a specific one :

`$('li:eq(2)').insertBefore($('li:eq(1)'));`

Will move the 3rd child before the 2nd (the indexs are 0 based).

edited Feb 28 '13 at 08:18

BG Adrian

answered Feb 28 '13 at 08:06
BG Adrian

485

1

4

12

1

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

edited Dec 04 '09 at 08:53

bang

answered Dec 04 '09 at 08:45
bang

4,982

1

24

28

0

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();`

answered Dec 04 '09 at 08:32
micahwittman

12,356

2

32

37

-1

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

answered Dec 04 '09 at 08:43
chefsmart

6,873

9

42

47

Linked

15
How to know index of a <tr> inside a <table> with jQuery?

0
Add data to first row using jquery DataTables

Question

What's the elegant way to do this?

Maybe this link would help you a bit: http://stackoverflow.com/questions/444801/move-x-number-of-rows-in-a-table-using-jquery — Paul Peelen, Dec 04 '09 at 08:26

score 7 · Answer 1 · answered Dec 04 '09 at 08:44

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

score 4 · Answer 2 · answered Sep 09 '10 at 02:28

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

BG Adrian · Answer 3 · 2013-02-28T08:18:46.900

If you want to move it to the top or bottom would be easier, though this would not help you :(

//lets say you want to avoid/skip table headers and use a tbody
var tbody = $('tbody','#table');
//now you want a specific row bring to top
$('tr.chieftan',tbody).prependTo(tbody);

To move from a specific index, to a specific one :

$('li:eq(2)').insertBefore($('li:eq(1)'));

Will move the 3rd child before the 2nd (the indexs are 0 based).

bang · Answer 4 · 2009-12-04T08:53:48.537

1

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

edited Dec 04 '09 at 08:53

answered Dec 04 '09 at 08:45

bang

4,982
1
24
28

score 0 · Answer 5 · answered Dec 04 '09 at 08:32

0

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

answered Dec 04 '09 at 08:32

micahwittman

12,356
2
32
37

score -1 · Answer 6 · answered Dec 04 '09 at 08:43

-1

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

answered Dec 04 '09 at 08:43

chefsmart

6,873
9
42
47