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/

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 :)

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/

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