Jquery move table rows to top

Question

First off, I stored all my trs with a function, and then I selected part of the trs with this, opening them:

// tr = all my stored trs
tr.find("input[value='Selecteren']").click();
// This .click() function changes the input value to "Aanvragen"

Now I want to move all the clicked tr's to the top of my table body.

//$("#village_troup_list tbody")

Getting all the tds is quite simple:

tr.find("input[value='Aanvragen']").closest('tr').each(function() {
 //Move every tr
})

But how do I move them?

Html structure:

http://jsfiddle.net/4PFf8/1/

Dealing

Can you show your HTML structure? jQuery does not include a move function. You'll need to use clone(), appendTo() and remove() in some order (depending upon your mark up). – Offshore

$("table").find("tbody").find("tr:first").insertBefore("trs to move") try this. – Par

Answer 1

 $("#village_troup_list tbody").prepend(tr.find("input[value='Aanvragen']").closest('tr'));

This works because every tr is viewed as a single tr, and not as a number of trs. So it moves them instead of cloning :)

Ontine

thanks this worked. can do this with animation? – Elly

Answer 2

You can just use .prependTo to move elements to the top of the table. Here is a fiddle illustrating: http://jsfiddle.net/5uc9H/

Disesteem

Answer 3

Statically move up:

onclick="$(this).parents('tr:first').insertBefore($(this).parents('tr:first').prev())"

Statically move down:

onclick="$(this).parents('tr:first').insertAfter($(this).parents('tr:first').next())"

Gunpaper