how do i create sub groups within table using jquery?

Question

i am creating a stock portfolio. each row is a stock and it's data including profit/loss. each row has a groupid that the user can specify. the idea is i want to:

1) physically group the rows based on the groupid 2) after step #1 i want to dynamically add a row below that group with the subtotal of the profit/losses for that group only.

so each group can contain many rows, and each group will have one subtotal row that adds up all the profit/losses for that group. i just want to make sure that subtotal row is always right below the last row in that group.

i will need to be able to do this whenever someone adds a new row to my table (i allow them to dynamically add new rows through the UI). that is, if someone adds a new row and gives it a groupid of 3, i need to at that moment stick that row with the other groupid 3 rows and include it in the subtotal calculation.

thanks

Answer 1

Use <tbody> elements to group table rows.

<table>
<tbody id="GOOG">
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
</tbody>
<tbody id="GOOG_subtotal">
  <tr>...</tr>
</tbody>
...
</table>

with:

function append(code, amount) {
  $("<td></td>").text(amoung).wrap("<tr></tr>").appendTo("#" + code);
  var subtotal = $("#" + code + "_subtotal td");
  subtotal.text(subtotal.text() + amount);
}