Javascript 自动计算动态添加和删除行的总和-jquery

如何计算动态添加和删除行的总和，我可以创建一些代码，但它的工作只是添加行，当我单击som不会计算时，我只需要在添加行和删除行时自动计算总和

删除行时，总和不会减少

这是小提琴

这是我的片段

$（文档）.ready（函数（）{
var计数器=0；
$（“添加行”）。在（“单击”，函数（）上{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+='x'；
newRow.append（cols）；
var defVal=$（“选择[name=acctname]”）。查找（“：selected”）.val（）；
if（defVal）{
$（“选择[name=accountName]”）。查找（`option[value=${deffal}]`）。隐藏（）；
}
$（“table.order list”）.append（newRow）；
setValCashVal（'accountName'.concat（计数器））；
bindScript（）；
计数器++；
});
//删除函数
$（“table.order list”）。在（“click”、“.ibtnDel”函数上（\u事件）{
$（this）.tr.remove（）；
计数器-=1
});
});
/*总数*/
$（'body'）。关于（'change'，'data action=“sumDebit”]”，函数（）{
var合计=0；
$（'[data action=“sumDebit”]'）。每个（函数（_i，e）{
var val=解析浮点值（即值）；
如果（！isNaN（val））
总+=val；
});
$（'totaldbt'）.val（总计）；
});

借项*
总计：
删除添加时所做的行时，只需执行相同的操作


$（文档）.ready（函数（）{
var计数器=0；
$（“添加行”）。在（“单击”，函数（）上{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+='x'；
newRow.append（cols）；
var defVal=$（“选择[name=acctname]”）。查找（“：selected”）.val（）；
if（defVal）{
$（“选择[name=accountName]”）。查找（`option[value=${deffal}]`）。隐藏（）；
}
$（“table.order list”）.append（newRow）；
setValCashVal（'accountName'.concat（计数器））；
bindScript（）；
计数器++；
});
//删除函数
$（“table.order list”）。在（“click”、“.ibtnDel”函数上（\u事件）{
$（this）.tr.remove（）；
计数器-=1
var合计=0；
$（'[data action=“sumDebit”]'）。每个（函数（_i，e）{
var val=解析浮点值（即值）；
如果（！isNaN（val））
总+=val；
});
$（'totaldbt'）.val（总计）；
});
});
/*总数*/
$（'body'）。关于（'change'，'data action=“sumDebit”]”，函数（）{
var合计=0；
$（'[data action=“sumDebit”]'）。每个（函数（_i，e）{
var val=解析浮点值（即值）；
如果（！isNaN（val））
总+=val；
});
$（'totaldbt'）.val（总计）；
});

借项*
总计：
change
删除行时不会触发事件。我建议使用一个单独的函数来计算总计，并在更改和行删除时调用它

参见小提琴：

删除按钮单击事件未重新计算总数

@design&Bilal的答案将所有值相加以求和。相反，您可以从总计中减去已删除行的值

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    counter -= 1
    var total = $('#totaldbt').val();
    var delVal = $(this).closest("tr").find('input').val();
    var val = parseFloat(delVal);
    if (!isNaN(val))
      total -= val;
    $('#totaldbt').val(total);
    $(this).closest("tr").remove();
  })

修改删除函数，如下所示，从总计中减去删除的值

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    counter -= 1
    var total = $('#totaldbt').val();
    var delVal = $(this).closest("tr").find('input').val();
    var val = parseFloat(delVal);
    if (!isNaN(val))
      total -= val;
    $('#totaldbt').val(total);
    $(this).closest("tr").remove();
  })

)
 我将计算移动到函数calculateTotal，并为删除按钮添加一个事件，以便在删除任何行时重新计算总计：


$（文档）.ready（函数（）{
var计数器=0；
$（“添加行”）。在（“单击”，函数（）上{
var newRow=$（“”）；
var cols=“”；
cols+=''；
cols+='x'；
newRow.append（cols）；
var defVal=$（“选择[name=acctname]”）。查找（“：selected”）.val（）；
if（defVal）{
$（“选择[name=accountName]”）。查找（`option[value=${deffal}]`）。隐藏（）；
}
$（“table.order list”）.append（newRow）；
setValCashVal（'accountName'.concat（计数器））；
bindScript（）；
计数器++；
});
//删除函数
$（“table.order list”）。在（“click”、“.ibtnDel”函数上（\u事件）{
$（this）.tr.remove（）；
计数器-=1
});
});
/*总数*/
$（'body'）。关于（'change'，'data action=“sumDebit”]”，函数（）{
计算总数（）；
});
$（文档）.on（'单击'，'.ibtnDel'，函数（）{
计算总数（）；
});
函数计算器总计（）{
var合计=0；
$（'[data action=“sumDebit”]'）。每个（函数（_i，e）{
var val=解析浮点值（即值）；
如果（！isNaN（val））
总+=val；
});
$（'totaldbt'）.val（总计）；
}

借项*
总计：
change
仅当用户更改表单控件元素的值时才会激发，而当您从表中删除行时不会激发。先生，请检查此..-在这种情况下怎么办？我有一个静态列，此列没有删除选项。我怎么办？先生，在这种情况下我怎么办？我有一个静态列，此列没有删除选项。我怎么办这个案子？？请检查这个@乔：这个解决方案有什么问题吗？它正在工作，先生，但我只需要启动功能。意思是当我开始输入值时，自动计算总和。@Joe只需将$（'body'）。在（'change'，'data action=“sumDebit”]'）上更改为$（'body'）。在（'keyup'，'data action=“sumDebit”]'）上进行一些优化，在删除行时直接递减值，先生，在这种情况下怎么办？我有一个静态列，此列没有删除选项。我怎么办这个案子？？请检查这个先生，在这种情况下，我们怎么办？我有一个静态列，此列没有删除选项。我怎么办这个案子？？请检查这个-