Merge each row above parent with parent/children?

Question

I have an HTML table that has a column to the left (parent classes) and columns/rows to the right (children classes). The first column spans several rows while the ones to the right do not. I am attempting to merge each row that is above a parent into the parent below it. Example: Subtotal above Group 1 merged with Group 1 instead of its own row. A little weird to explain so here is my jsfiddle link: https://jsfiddle.net/khemikal/ry5p4842/

Here is my function:

 $(document).ready(function() {
    $(".parent").each(function(index, element) {
      var subTotal1 = 0;
      var subTotal2 = 0;
      var subTotal3 = 0;
      var numRows = parseInt($(this).attr("rowspan"));
      var firstRow = $(this).parent();
      var currentRow = firstRow;
      for (i = 0; i < numRows; i++) {
        subTotal1 += parseInt($(currentRow.children(".child")[0]).text());
        subTotal2 += parseInt($(currentRow.children(".child")[1]).text());
        subTotal3 += parseInt($(currentRow.children(".child")[2]).text());
        currentRow = currentRow.next("tr");
      }
      firstRow.before('<tr><td></td><td class="sub0">Sub Total</td><td class="sub1">' + subTotal2 + '</td><td class="sub2">' + subTotal3 + '</td></tr>');
    });
  });

Any help or advice on achieving this would be appreciated.

Solution 1

I've taken your code and simply rearranged it.

I've placed the tr at the end, however, this can easily be moved back to the top.

What you were wanting to do was expand the group's rowspan. Since you already have the numRows variable, I simply added 1 to it and reapplied it to the group.

Edit to make it apply to multiple groups, we have to determine the lastRow of each group. I've done this with the named variable. Now, we can ensure that we append the subtotal to the last row before we increment the row's rowspan value.

https://jsfiddle.net/vhzjwxkt/

Solution 2

I'd leave a comment but I don't have enough rep yet for that.

I think you need to provide more info. I'm not sure why you would use .before if you're trying to place it in a specific spot. I'm also not sure why you would be organizing a parent child structure this way. If it were up to me to organize it, I would use data attributes to group it together, or some other attribute (since this is outside a normal DOM parent child relationship).

It sounds like you need to loop through the rows, not the parents. At that point, I would organize the parent > child structure based on the order of the rows using .hasClass to check.

Give me more info and I'll try to help, I'll revise this answer.

Comments

[Admin]

nginx does have an embedded Lua scripting language; it should be possible to do this.

[Dan Sosedoff]

Funny, this is a link to my own blog post :)

[khemikal]

almost on par with with I am aiming to achieve, perhaps this larger example? jsfiddle.net/khemikal/r5xm9act/77

[Wes Foster]

Do you need the subtotal row to be at the top of each group? Or is the bottom acceptable?

[Wes Foster]

Got it! Updating my answer now