計算 jquery 中動態表行組的總和

Question

我有三個組-資本，固定資產和當前資產（粉紅色），如果該行下面有另一行，那么它將成為父級（橙色）。

當我在組的底部添加一個新行（級別 1）時，它會將值與父組和組相加。 但實際上它應該只對組求和，因為它處於 1 級並且它下面沒有子級。

X 表示金額不應出現在行中。 它不應該與父母相加，因為它不是父母的孩子。 如何使級別 1 始終只對組求和？

 $(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

我稍微修改了你的 jquery function。 所有行都有定義其級別的 class。 僅當子行級別高於父行級別時才添加到總數中。

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);
    }
  });
}