javascript - 在 HTML 表内进行计算时遇到问题

Question

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

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

我的问题是什么

• 当用户在 Disc% 中输入一些数据并按 tab 时，我正在调用一个函数来计算数据，假设有时用户错误地按 >tab 并想要返回到 Disc% 并创建新行，因此当我按 right Shift+tab 返回到 Disc% 时 当函数 calcDiscount 再次运行时，它会进行一些计算，有时如果我返回编辑 Disc% 字段，那么它也会运行函数 calcDiscount

• 有时还会错误地使用将表的输入字段中的某些字段留空我试图在用户留下任何空字段时发出警报，但这也没有帮助

请查看fiddle我正在这样做

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

请查看我的 fiddle ，我已经评论了那里的所有行

注意-:输入DIsc%后，请使用rightShift+tab聚焦后返回Disc% > 并查看页脚中的unitQty，它会自动增加

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

在此处查看更新的 fiddle https://jsfiddle.net/pLcexr6t/