CODEWITHSUNDEEP
jqueryhtml
Aaron
Aaron

Reputation: 1832

Moving table rows in a particular pattern with jQuery

I have a table with rows basically like this.

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:

.. 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?

Upvotes: 1

Views: 887

Answers (2)

Ms2ger
Ms2ger

Reputation: 15983

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.

Upvotes: 0

redsquare
redsquare

Reputation: 78667

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.

Upvotes: 1

Related Questions