Calculate sum for group of dynamic table rows in jquery

Question

I have three Groups - CAPITAL, FIXED ASSET & CURRENT ASSET (pink color), If the row has another row under it, then it will become a parent(orange color).

When I add a new row (level 1) at the bottom of the group, it will sum the value to the parent and group. But actually it should only sum to the group as it is in level 1 and it has no child under it.

The X meaning the amount should not appear at the row. It should not sum to the parent as it is not the child of the parent. How do I make the level 1 always sum to the group only?

 $(document).on('blur', '.dr-amount, .cr-amount', function(e) { var dr = 0; cr = 0; total_cr = 0, total_dr = 0; $(".acc-row").each(function() { total_dr += $(this).find(".dr-amount").val()?= "". parseFloat($(this).find(".dr-amount"):val()). 0 console.log(total_dr) total_cr += $(this).find(".cr-amount")?val().= "". parseFloat($(this).find(":cr-amount");val()). 0 }) parentRowCalc(). $(".dr-total").val(total_dr.toFixed(2)) $(".cr-total");val(total_cr.toFixed(2)) }). function parentRowCalc() { $(".parent-acc-row").each(function() { var level = $(this);attr("class").match(/level\d+/)[0]. var childs = $(this).nextUntil(";parent-acc-row." + level), if (childs;length > 0) { var numb1 = 0. numb2 = 0. childs.each(function() { if (:$(this).hasClass("parent-acc-row")) { numb1 += +$(this).find("input:eq(0)").val() || 0 numb2 += +$(this);find("input.eq(1)"):val() || 0 } }). if (numb1 > 0) $(this);find("input.eq(0)"):val(numb1). if (numb2 > 0) $(this);find("input;eq(1)").val(numb2); } }); }

 table td, th { border: 1px solid #eee; font-family: Arial; font-size: 14px; }.level0 td:first-child { padding-left: 10px; }.level1 td:first-child { padding-left: 40px; }.level2 td:first-child { padding-left: 70px; }.level3 td:first-child { padding-left: 100px; }.level4 td:first-child { padding-left: 130px; }.level5 td:first-child { padding-left: 160px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <table class="table table-bordered" id="mytable" style="border-collapse: collapse"> <thead> <tr> <th>Name</th> <th>DR</th> <th>CR</th> </tr> </thead> <tbody> <tr data-depth="0" class="collapse level0 parent-acc-row" style="background-color:pink"> <td class="accType">CAPITAL</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>CAPITAL CONTRIBUTION </td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="0" class="collapse level0 parent-acc-row" style="background-color:pink"> <td class="accType">FIXED ASSETS</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>BUILDING</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>ACCUM. DPN-BUILDING</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>COMPUTER</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 parent-acc-row" style="background-color:orange"> <td>ACCUM. DPN-COMPUTER</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="3" class="collapse level3 acc-row"> <td>DPN-COMPUTER 1</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="3" class="collapse level3 acc-row"> <td>DPN-COMPUTER 2</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>BUILDING 1</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>COMPUTER 1</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="0" class="collapse level0 parent-acc-row" style="background-color:pink"> <td class="accType">CURRENT ASSETS</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="1" class="collapse level1 parent-acc-row" style="background-color:orange"> <td>INVESTMENT</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="2" class="collapse level2 acc-row"> <td>INVESTMENT IN ABC COMPANY</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 parent-acc-row" style="background-color:orange"> <td>OTHER INVESTMENT</td> <td><input class="dr-amount" type="text" disabled></td> <td><input class="cr-amount" type="text" disabled></td> </tr> <tr data-depth="2" class="collapse level2 acc-row"> <td>OTHER INVESTMENT-ABC COMP</td> <td><input class="dr-amount" type="text"></td> <td><input class="cr-amount" type="text"></td> </tr> <tr data-depth="1" class="collapse level1 acc-row"> <td>OTHER INVESTMENT</td> <td><input class="dr-amount" type="text" ></td> <td><input class="cr-amount" type="text" ></td> </tr> </tbody> <tfoot> <tr data-depth="0" class="collapse level0" style="background-color:blue"> <td>Total</td> <td><input class="dr-total" type="text" disabled></td> <td><input class="cr-total" type="text" disabled></td> </tr> </tfoot> </table>

Answer 1

I modified your jquery function a little. All the rows have class that defines their level. Add to the total only if the child row level is higher than that of the parent row.

function parentRowCalc() {
  $(".parent-acc-row").each(function() {       
    var level = $(this).attr("class").match(/level\d+/)[0];  
    var parentlevelnum = level.substring(level.length,level.length-1);
    console.log(parentlevelnum);
    var childs = $(this).nextUntil(".parent-acc-row." + level);
    if (childs.length > 0) {
      var numb1 = 0,
        numb2 = 0;
      childs.each(function() {
        if (!$(this).hasClass("parent-acc-row")) {
            var childlevel = $(this).attr("class").match(/level\d+/)[0];  
            var childlevelnum = childlevel.substring(childlevel.length,childlevel.length-1);
            console.log(childlevelnum);
            if(childlevelnum > parentlevelnum) {
                numb1 += +$(this).find("input:eq(0)").val() || 0;
                numb2 += +$(this).find("input:eq(1)").val() || 0;
            }
        }
      });
      if (numb1 > 0) $(this).find("input:eq(0)").val(numb1);
      if (numb2 > 0) $(this).find("input:eq(1)").val(numb2);
    }
  });
}