Reorder table rows using jquery

Question

This table is in a template, I cannot directly edit the HTML and need the links to be in a different order, I need to move the "about" link below the "donate" link.

<table class="leftnav">

<tbody>

<tr>
<td class="headergraphica">
<img src=".../images/ta.gif">
</td>
</tr>

<tr>
<td class="leftlinkheading">Information</td>
</tr>

<tr>
<td class="leftlink"><a href="#">event information</a></td>
</tr>

<tr>
<td class="leftlink"><a href="#">about</a></td>
</tr>

<tr>
<td class="leftlink"><a href="#">participate</a></td>
</tr>

<tr>
<td class="leftlink"><a href="#">donate</a></td>
</tr>

</tbody>
</table>

Sounds great, what have you tried? – j08691 Jul 03 '13 at 16:48 — j08691, Jul 03 '13 at 16:48

score 1 · Accepted Answer · answered Jul 03 '13 at 16:55

1

You can do it like this -

$('.leftlink a:contains("donate")').closest('tr')
           .after($('.leftlink a:contains("about")').closest('tr'));

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

answered Jul 03 '13 at 16:55

Adil Shaikh

44,509
17
89
111

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

See some examples here

Could probably do

$(".leftnav tr:eq(3)").appendTo(".leftnav tbody");

edited May 23 '17 at 12:00

Community

1
1

answered Jul 03 '13 at 16:55

Matthew

155
4

Reorder table rows using jquery

2 Answers2