Best way to reverse parent tr ordering stack in a table via jQuery

Question

I have a table that is populated from a .net app that produces the following content...

<table>
<tbody>
...
<tr>...anything below...
  <table>
  <tbody id="blahlkjasdblah">
    <tr><td> 
    lots of custom content
    </td></tr>
  </tbody>
  </table>
</tr>
<tr>...anything below...
    <div id="something">
    <table id="othertable">
    <tbody>
      <tr><td>
      lots of other custom content that is different
      </td></tr>
    </tbody>
    </table>
    </div>
</tr>
</tbody>
</table>

What is the best way to reverse **these first two parent only** <tr> NOT NESTED TABLES OR TR blocks, this way the one on the bottom is on top of the 1st one?

Thanks

Hi blachawk, by "best" do you mean fastest code execution or cleanest to write/maintain? — jmbertucci, May 23 '13 at 15:33
@jmbertucci i would like a little of both :) but cleanest would be good. — klewis, May 23 '13 at 15:41
I found the consideration of "best" to be the more interesting question. I threw this virtual napkin fiddle together to try and see what really would be "best". http://jsfiddle.net/YfufZ/4/ I theorized that appending nodes over and over would be slower than just replacing the entire HTML, but it seems the accepted answer tends to come in the fastest. While using the ".each()" function is the slowest. At least, if I setup my simple tests right. — jmbertucci, May 24 '13 at 13:46
dystroy, PSL, wirely, Lukasz, Lech, Edwin Alex, this is "not" a duplicate question - I am asking to modify the parent tr elements (only). not nested tr elements. @Kevin B was the "only one" of all developer who answered my specific question correctly. — klewis, May 24 '13 at 16:36
@blachawk KevinB answered the question correctly, yes, but this really is a duplicate, there's no notable difference. — Denys Séguret, May 24 '13 at 20:56
So what you guys want me to do since you are convinced this is a duplicate question. Sorry for the trouble. — klewis, May 24 '13 at 22:13

score 9 · Accepted Answer · edited Jan 29 '14 at 23:03

9

Use the [].reverse method.

[].reverse.call($("#myTable > tbody > tr")).appendTo("#myTable > tbody");

jsFiddle

or turn it into a jquery plugin:

$.fn.reverse = [].reverse;
$("#myTable > tbody > tr").reverse().appendTo("#myTable > tbody");

edited Jan 29 '14 at 23:03

animuson

53,861
28
137
147

answered May 23 '13 at 15:31

Kevin B

94,570
16
163
180

is that going to look for every tr or just the first two parent tr's ? – klewis May 23 '13 at 15:38
All tr's that are in the tbody. – Kevin B May 23 '13 at 15:39
i need the to modify the parent tr's only – klewis May 23 '13 at 15:42
parent tr's? i don't understand. parents of what? all tr's are parents of table cells. – Kevin B May 23 '13 at 15:42
First and Last tr's only? – Kevin B May 23 '13 at 15:43
this is what i mean: within the 2nd tr, I have another table in there. I don't care about that nested table that is inside the 2nd parent tr. I just want to reverse the 2 parent trs. does that make sense? – klewis May 23 '13 at 15:43
Ah nested tables. Just modify the selector to only target the parent tr's. change incoming... – Kevin B May 23 '13 at 15:44

score 7 · Answer 2 · answered May 23 '13 at 15:31

7

 var $body = $('tbody');    
 var list = $body.children('tr');
 $body.html(list.get().reverse());

Demo --> http://jsfiddle.net/kYwk9/

answered May 23 '13 at 15:31

Adil Shaikh

44,509
17
89
111

score 3 · Answer 3 · answered May 23 '13 at 15:31

3

table = $('tbody');
table.children().each(function(i,li){table.prepend(li)});

answered May 23 '13 at 15:31

chrislondon

12,487
5
26
65

score 3 · Answer 4 · answered May 23 '13 at 15:33

3

The best way would be to change the way this table is generated in the first place. I imagine that currently that's being done server side based on an iteration through a list of elements. Instead, switch to a client side rendering that uses an AJAX call to gather this list of elements so that the javascript has access to it. Create the necessary templating code to render the list in the table. When you want to reorder the rows perform the operation on the list of elements itself and then rerun the templating code.

answered May 23 '13 at 15:33

Spencer Ruport

34,865
12
85
147

1

I imagine the reason he's asking is because he doesn't have access to the .net app – chrislondon May 23 '13 at 15:33
Maybe, but that might not be the case for all who see this question. – Spencer Ruport May 23 '13 at 15:34
@SpencerRuport you are right, but the current .net developers at the moment, have their hands tied and I need to give a quick answer for a project manager. So yes I agree with you and have it planned, but thank goodness for jQuery :) – klewis May 23 '13 at 15:36
@blachawk - For sure. Just wanted to give this perspective in case it was an option for you or for anyone else who reads this question. :) – Spencer Ruport May 23 '13 at 15:37

Joe · Answer 5 · 2013-05-23T15:37:44.933

2

Try this:

tbody = $('tbody');
tbody.children().each(function(i,tr){
    tbody.prepend(tr);
});

It goes through each tr element and .prepend()s it to the tbody which results in them all being reversed.

Here's a working version: http://jsfiddle.net/Ybyjx/

edited May 23 '13 at 15:37

answered May 23 '13 at 15:32

Joe

15,205
8
49
56

Best way to reverse parent tr ordering stack in a table via jQuery

5 Answers5