Invert table rows

Question

I want to invert table tbody rows with jQuery.

WHAT I HAVE:

<table width="630" border="0" cellspacing="0" cellpadding="0">
<thead>
 <tr>
    <td>TITLE A</td>
    <td>TITLE B</td>

(...) continue in jsfiddle.

Here what I have and what I want: http://jsfiddle.net/ZaUrP/1/

Answer 1

Try this:-

Get the array of trs from tbody using .get() and use Array.reverse to reverse the elements and assign it back.

var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());

Fiddle

In case you have events to tr or any containing elements you could just attach it using delegation, so that the reversed elements also get them delegated.

Demo

Answer 2

fiddle

pretty much the same as the other guy, only I use .detach() which is guarunteed to keep any crazy events that were attached to the trs intact. I also use $.makeArray to avoid reversing any of the proto stuff on the base jQuery object.

$(function(){
    $("tbody").each(function(elem,index){
      var arr = $.makeArray($("tr",this).detach());
      arr.reverse();
        $(this).append(arr);
    });
});