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/
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 tr
s 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);
});
});
Try this:-
Get the array of tr
s 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
$('tbody').each(function(){
var list = $(this).children('tr');
$(this).html(list.get().reverse())
});
Demo -->
http://jsfiddle.net/ZaUrP/5/
I wrote a jQuery plugin called $.reverseChildren
which will reverse all the specified children of a given element. Credit goes to DefyGravity for his insightful and intriguing use of $.makeArray
.
I have not only reversed the rows of a table, but also the columns.
(function($) {
$.fn.reverseChildren = function(childSelector) {
this.each(function(el, index) {
var children = $.makeArray($(childSelector, this).detach());
children.reverse();
$(this).append(children);
});
return this;
};
}(jQuery));
$(function() {
var tableCopy = $('#myTable').clone(true).attr('id', 'myTableCopy').appendTo(
$('body').append('<hr>').append($('<h1>').html('Reversed Table')));
tableCopy.find('tr').reverseChildren('th, td'); // Reverse table columns
tableCopy.find('tbody').reverseChildren('tr'); // Reverse table rows
});
* { font-family: "Helvetica Neue", Helvetica, Arial; }
h1 { font-size: 16px; text-align: center; }
table { margin: 0 auto; }
th { background: #CCC; padding: 0.25em; }
td { border: 1px solid #CCC; padding: 5px; }
hr { margin: 12px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Original Table</h1>
<table id="myTable" width="320" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr> <th>Header A</th> <th>Header B</th> <th>Header C</th> </tr>
</thead>
<tbody>
<tr> <td>Data 1A</td> <td>Data 1B</td> <td>Data 1C</td> </tr>
<tr> <td>Data 2A</td> <td>Data 2B</td> <td>Data 2C</td> </tr>
<tr> <td>Data 3A</td> <td>Data 3B</td> <td>Data 3C</td> </tr>
<tr> <td>Data 4A</td> <td>Data 4B</td> <td>Data 4C</td> </tr>
</tbody>
</table>