jquery - 如何循环和求和表单元素内的总值

Question

我想要实现的是当用户单击按钮时，按钮旁边的值应该插入到输入字段中，同时它应该减少禁用文本字段的值。

因此，当我单击按钮时，值会按预期插入，但是在下一个实例中消失，我尝试调试，但令人惊讶的是没有产生错误。当我在调试控制台中查看时，该值似乎已被捕获，但由于某种奇怪的原因，它并没有留在那里。以下是HTML

<form name="settlement" method="POST" action="#" novalidate>
<!-- This is the balance Amount Field -->
<input name="BalanceAmount" id="BalanceAmount" type="text" value="5000" disabled />

<table id="invoices">
    <thead>
        <tr>
            <td>Balance Amount</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                11234.25
            </td>
            <td>
                <input type="text" name="amount" class="form-control js-settlementAmount" value="0.00" step=".01" />
            </td>    
            <td>
                <button data-balanceamount="11234.25" class="form-control js-loadBalance">+</button>
            </td>
        </tr>
    </tbody>
</table>
</form>

和 Javascript ..

    $(document).ready(function () {
    
        var originalBalanceAmount = parseFloat($("#BalanceAmount").val().replace(/,/g, ''));

        $("#invoices").on("click", ".js-loadBalance", function () {
            var button = $(this);
            
            var balanceAmount = button.attr("data-balanceAmount");
            button.closest('tr').find('.js-settlementAmount').val(balanceAmount);

            //update the Journal entry balance amount
            var totalAppliedAmount = 0;
            $('#invoices tr').each(function () {
                
                var amount = $('.js-settlementAmount', this).val();

                if (amount != null)
                    totalAppliedAmount += parseFloat(amount);
                    //console.log(totalAppliedAmount);
            });
            
            var balanceAmount = (originalBalanceAmount - totalAppliedAmount).toFixed(2);
            var formattedValue = balanceAmount.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
            $("#BalanceAmount").val(formattedValue);
            
        });
    });

请随意粘贴脚本（不要忘记添加 jquery 库）;-)

肯定有专家能解开这个谜。

标签： jquerybuttonhtml5-canvas