Question

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

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

我的问题是什么

当用户在Disc%中输入一些数据并按tab时，我正在调用一个函数来计算数据，假设有时用户错误地按了tab并想去回到Disc%并创建新行，因此当我按Disc%回到right Shift+tab时，由于函数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)
        }
    }
});

请查看我的小提琴，我已在其中注释了所有内容

注意-：输入DIsc%后，请使用Disc%进行焦点调整后返回rightShift+tab，并在页脚中自动看到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)
      })

在此处查看更新的小提琴https://jsfiddle.net/pLcexr6t/

在HTML表格内进行计算时面临的问题

1 个答案: