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/

Please post the code you've tried. – j08691 May 22 '13 at 21:15 — j08691, May 22 '13 at 21:15

score 32 · Accepted Answer · answered May 22 '13 at 21:22

32

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

answered May 22 '13 at 21:22

DefyGravity

5,681
5
32
47

2

Perfectly valid!! Want to up vote this, but i ran out of votes... :( – PSL May 22 '13 at 21:37
1

This is an awesome answer. I modified your answer and created a jQuery plugin [below](http://stackoverflow.com/a/29413393/1762224). – Mr. Polywhirl Apr 02 '15 at 12:55
This does not work for me because I have some cells spanning multiple rows using 'rowspan' – mujtaba_ahmad Jun 04 '17 at 13:12

PSL · Answer 2 · 2013-05-22T21:48:59.790

11

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

edited May 22 '13 at 21:48

answered May 22 '13 at 21:18

PSL

123,204
21
253
243

2

If you have any events attached to the any of the elements inside the table better go with @DefyGravity answer. – PSL May 22 '13 at 21:49

score 4 · Answer 3 · answered May 22 '13 at 21:23

4

$('tbody').each(function(){
    var list = $(this).children('tr');
    $(this).html(list.get().reverse())
});

Demo --> http://jsfiddle.net/ZaUrP/5/

answered May 22 '13 at 21:23

Adil Shaikh

44,509
17
89
111

2

.get(). awesome. +1 as well. – DefyGravity May 23 '13 at 01:40
This works very well for sorting visible rows in place! – Jamie M. Aug 18 '19 at 23:21

score 1 · Answer 4 · edited May 23 '17 at 12:33

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>

score 1 · Answer 5 · answered Sep 05 '20 at 16:41

I know this is late, but it can help some other users looking for an answer

function reverseTable() {
  var table = document.getElementById("table")
  var trContent = []
  for (var i = 0, row; row = table.rows[i]; i++) {
    trContent.push(row.innerHTML)
  }
  trContent.reverse()
  for (var i = 0, row; row = table.rows[i]; i++) {
    row.innerHTML = trContent[i]
  }
}

table {border-collapse: collapse}
table, td {border: 1px solid black}

<html>
  <body onload="reverseTable()">

  Original Table
  <table>
    <tbody>
      <tr>
        <td>Cell 1,1</td>
        <td>Cell 1,2</td>
        <td>Cell 1,3</td>
      </tr>
      <tr>
        <td>Cell 2,1</td>
        <td>Cell 2,2</td>
        <td>Cell 2,3</td>
      </tr>
      <tr>
        <td>Cell 3,1</td>
        <td>Cell 3,2</td>
        <td>Cell 3,3</td>
      </tr>
    </tbody>
  </table>

  <br>

  Reversed Table
  <table id="table">
    <tbody>
      <tr>
        <td>Cell 1,1</td>
        <td>Cell 1,2</td>
        <td>Cell 1,3</td>
      </tr>
      <tr>
        <td>Cell 2,1</td>
        <td>Cell 2,2</td>
        <td>Cell 2,3</td>
      </tr>
      <tr>
        <td>Cell 3,1</td>
        <td>Cell 3,2</td>
        <td>Cell 3,3</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Invert table rows

5 Answers5

Fiddle

Demo

Linked