根据上一个表的TD输入值计算值

Calculating value based on last table td input value

提问人:Leo 提问时间:10/21/2023 更新时间:10/23/2023 访问量:44

问:

嗨,你好, 我正在尝试创建一个动态帐户对帐单,当输入金额时,它应该根据 中的前一个余额自动计算余额。我已经尝试了下面的代码,但我不知道我错过了什么。 下面是我的html和js代码<td><input>

  <table class="table table-bordered table-striped table-hover" id="invoiceItem">
                    <tr>
                      <th width="2%"><input class="formcontrol" id="checkAll" type="checkbox"></th>
                      <th width="7%">Item Date</th> 
                      <th width="12%">Item Number</th>   
                      <th width="42%">Description</th> 
                      <th width="11%">Charges (Debit)</th>                     
                      <th width="12%">Credit</th>
                     <th width="14%">Balance</th>
                      
                    </tr>

                    <tr>
                      <td><input class="itemRow" type="checkbox"></td>
                      <td><input autocomplete="off" class="form-control itemdate" id="itemdate_1" name="itemdate[]" type="date" required></td>
                      <td><input autocomplete="off" class="form-control itemnum" id="itemnum_1" name="itemnum[]" type="text" required></td>
                      <td><textarea id="productDescription_1" name="productDescription[]" class="form-control"></textarea></td>
                      <td><input autocomplete="off" class="form-control quantity" id="charges_1" name="charges[]" type="number" required></td>
                      <td><input autocomplete="off" class="form-control price" id="credits_1" name="credits[]" type="number" placeholder="125" required></td>
                      <td><input autocomplete="off" class="form-control total" id="total_1" name="total[]" type="number"></td>
                      
                    </tr>
                  </table>

在 Js 中不是很好,但确实可以像这样工作,不会返回错误,也不会打印任何值

$(document).ready(function() {
      try {
       $("#invoiceItem tr td input[id^='charges_']").each(function() {
         var id = $(this).attr('id');
        id = id.replace("charges_",'');
        var debits = Number(parseFloat($('#charges_'+id).val()));
        var credits  = Number(parseFloat($('#credits_'+id).val()));
            var sum = $(this).closest('tr').prev('tr').find('#total_'+id).val();

             var total;
                 if (debits !== 0) {
                    sum=Number(sum);
                    total = sum + debits - credits;

                } else if (credits !== 0){
                    sum=Number(sum);
                    total = sum - credits;
                    //console.log(total);
                }
                else{
                  sum=Number(sum);
                  total = sum + debits;
                }
                $('#total_'+id).val(parseFloat(total));
        });
       }
catch(err) {
  document.getElementById("noContent").innerHTML = err.message;
}
 });

这是我期待的结果statement result

JavaScript HTML 动态数组

评论

0赞 chrwahl 10/21/2023
将 HTML 表格视为某些数据的表示形式。因此,每次添加、删除或更改新数据时,您都会根据数据创建表。在某个数组或 JSON 对象中维护数据。更新数据对象,并在此基础上更改表的内容。
0赞 Leo 10/21/2023
@chrwahl我正在寻找的与此 stackoverflow.com/questions/54006813/ 相似......唯一的区别是我的数据是基于输入值数据的数组数据,而不是预先保存的保存数据。这意味着,当人员在输入字段上输入数据时,TOTAL会发生变化,例如(Total+charges-credit = Total)

答:

0赞 Leo 10/23/2023 #1

我想通了,它返回了一个 NAN 值,所以我通过在我的 html 输入中使用占位符值 0 (value=“0”) 来解决它