Moving table rows in a particular pattern with jQuery

Question

Hi All,

I have a table with rows basically like this.

• Normal Row
• Normal Row
• Normal Row
• Summary Row
• Normal Row
• Summary Row
• Normal Row
• Normal Row
• Summary Row

So basically X "normal rows", which will always be followed by a "summary row". The summary rows display aggregates of the data in the normal rows. I calculate the aggregates at runtime, hence the "summary rows" are naturally placed AFTER the normal rows that they aggregate.

All I need to do, is move each "summary row", above the clump of "normal rows" preceding it, at runtime. So I end up with:

• Summary Row
• Normal Row
• Normal Row
• Normal Row
• Summary Row
• Normal Row
• Summary Row
• Normal Row
• Normal Row

.. etc.

So by giving them appropriate css classes, say class="summary" and class="normal", I'd like a selector query written that matches each "summary row", and effectively moves it above the first "normal row" that precedes it.

What is the most elegant jquery way?

Thx in advance.

Answer 1

See the following rough demo here. I took the approach to start with the last summary row and move it after the preceding summary row. Of course the first summary does not have a preceding row so you need to check for this and move it to be the first row in the tbody.

Answer 2

I suspect it might be easier to do if you changed your markup to something like

<table>
  <tbody>
    <tr>Normal Row
    <tr>Normal Row
    <tr>Normal Row
    <tr>Summary Row
  <tbody>
    <tr>Normal Row
    <tr>Summary Row
  <tbody>
    <tr>Normal Row
    <tr>Normal Row
    <tr>Summary Row
</table>

HTH.