在HTML表中进行计算时面对问题

Question

我有一个动态的html tbody，我在选择选项的更改事件上创建，因此在我的表格中，我有3个输入字段

• ItemName是 autocomplete我正在为此使用jQuery UI，因此当用户选择任何ItemName时，我将该ItemName的数据填充到表的相应字段中，我拥有的所有数据均以JSON格式
• 然后，用户转到下一个输入字段，即UnitQty并输入某些内容，并从中焦点我正在进行一些计算
• 那么最后一个输入字段是Disc%，在这里我正在做2-3件事，当用户输入一些输入并按enter时，我正在创建与上面相同功能的新行，并且在页脚行中进行了一些计算，并显示了一些计算我命名为Total
• 当用户想创建新行时，只有他/她将按Enter键按否则按下 Disc%和相同的计算，我正在做

我的问题是

• 当用户输入Disc%内的某些数据并按tab时，我正在调用一个函数来计算数据，假设有些次用户错误地按tab，想返回Disc%并创建新行，因此通过按right Shift+tab返回到Disc%，随着函数calcDiscount再次运行，它给出了一些计算，有时如果我回头编辑Disc%字段，则它还运行函数calcDiscount

• 有时也会被错误地使用，请在表输入字段中丢下一些空的字段，每当用户离开任何空字段时，我都尝试提醒，但这也没有帮助

请检查小提琴我在下面做

$(document).keypress(function (event) {
    const row = event.target.parentElement.parentElement
    var keycode = event.keyCode || event.which;
    if (keycode == '13') {
        if (event.target.matches('[name=discPercentagetd]')) {
            calcDiscount(event.target.parentElement.parentElement)
            if ($(row).parent().find('tr').length - $(row).index() === 1) {
                rowappend(event.target.parentElement.parentElement.parentElement)
            }
        }
    }
});
document.addEventListener("keydown", function (event) {
    const row = event.target.parentElement.parentElement
    if (event.target.matches('[name=discPercentagetd]')) {
        var keycode = event.keyCode || event.which;
        if (keycode == '9') {

            calcDiscount(event.target.parentElement.parentElement)
        }
    }
});

请查看我的小提琴，我在那里评论了所有行

注意 - ：输入DIsc%后，请在使用rightShift+tab聚焦后返回到Disc%，然后在页脚中查看unitQty，IT Auto IT Auto Ink

Answer 1

您需要将所有值设置为0，然后通过迭代所有行，

来计算值

这样，

      total = 0;
      totalDiscountAmt = 0;
      totalGstAmt = 0;
      totalUnitQty = 0;
      subtotal = 0;
      $("#tableInvoice tbody tr").each(function() {
        if (!$(event.target).val()) {
          e.preventDefault();
          return;
        }
        calc(this)
        calcDiscount(this)
      })

请参阅此处的更新的小提琴https://jsfiddle.net/plcexr6t/