無法在Ajax計算表格中獲得總計

Question

我創建了這樣的表單：

問題是我無法獲得小計字段的總數。

我試圖創建與總計總計相同的總計字段，但是沒有運氣。 我想知道是否犯了一個錯誤，那就是不全局創建一些變量？ 有沒有簡單的解決方案可以做到這一點？ 您可以在這里找到完整的代碼： http : //autopartsdiscountcoupons.com/table/Form.html

 $("#con_qty116").bind('keyup mouseup', function() { var rate = 40; var qty = $("#con_qty116").val(); var val = qty * rate; $("#con_qty116_td").text(val); sub_total_of_weather_sheild(); }); $("#con_qty117").bind('keyup mouseup', function() { var rate = 160; var qty = $("#con_qty117").val(); var val = qty * rate; $("#con_qty117_td").text(val); sub_total_of_decorative_surface(); }); function sub_total_of_weather_sheild() { var td116 = parseInt($("#con_qty116_td").text()); var sub_tot = td116; $("#weather_sheild_qty_sub_total").text(sub_tot); gr_total(sub_tot); } function sub_total_of_decorative_surface() { var td117 = parseInt($("#con_qty117_td").text()); var sub_tot = td117; $("#decorative_surface_qty_sub_total").text(sub_tot); } 

  <td>116</td> <td>Provide and apply Weathershield (Reputable Brand) minimum... </td> <td>Sft</td> <td><input id="con_qty116" name="con_qty116" type="number" /></td> <td>40</td> <td id="con_qty116_td">0</td> <th colspan="4">Sub Total</th> <td id="weather_sheild_qty_sub_total" colspan="2">0</td> <td>117</td> <td>Color Crete min 4mm thickness including surface preparation applied on prepared surface using Applicant Machine/Gun </td> <td>Sft</td> <td><input id="con_qty117" name="con_qty117" type="number" /></td> <td>160</td> <td id="con_qty117_td">0</td> </tr> <tr> <th colspan="4">Sub Total</th> <td id="decorative_surface_qty_sub_total" colspan="2">0</td> </tr> <th colspan="4">Grand Total</th> <th colspan="2" id="grand_total">0</th> 

Answer 1

在每個功能上，當您更新小計時，您還將獲得每個小計，並將所有這些總和相加並放入小計中。 遵循步驟：-

1. 在grand_total（）函數中獲取每個小計的值

    function grand_total(){ var grand_total = parseInt($("#ew_qty_sub_total").text()); grand_total += parseInt($("#con_qty_sub_total").text()); grand_total += parseInt($("#rein_qty_sub_total").text()); . . . grand_total += parseInt($("#weather_sheild_qty_sub_total").text()); grand_total += parseInt($("#decorative_surface_qty_sub_total").text()); $("#grand_total").text(grand_total); } 

2. 在每個keyup / mouseup函數中調用此函數。 像這樣：-

    $("#ew_qty1").bind('keyup mouseup',function () { var rate = 12; // Take Quantity from user var qty = $("#ew_qty1").val(); // Multiply Quantity By 10 var val = qty*rate; // Set Text In TD $("#ew_qty1_td").text(val); sub_total_of_earth_Work(); grand_total(); //call for total of sub total }); 

Answer 2

通過腳本進行計算的方式確實非常引人注目。 為表中的每一行寫一個函數沒有意義-因為最后有100多個函數定義。

因此，您必須重組代碼並重新使用相同的（一個）函數來計算總和。 在下面，您可以看到它是如何完成的，希望您對此有所了解：

 function calculateAll(e) { var grandTotal = 0; $('.sub_table').each(function(i) { var thisTable = $(this); var subTotal = 0; thisTable.find('tbody tr').each(function(j) { var thisRow = $(this); var amount = parseInt(thisRow.find('.multi1').val()) * thisRow.find('.multi2').val(); subTotal += amount; thisRow.find('.amount').val(amount); }); grandTotal += subTotal; thisTable.find('.subtotal').val(subTotal); }); $('.grandtotal').val(grandTotal); }; $('.sub_table input').on('input', calculateAll); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table class="sub_table"> <thead> <tr> <th>S.No.</th> <th>EARTH WORK</th> <th>Unit </th> <th>Quantity</th> <th>Rate</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Excavation for foundation... </td> <td>Cft</td> <td><input class="multi1" value="0" type="number" /></td> <td><input class="multi2" value="12" readonly /></td> <td><input class="amount" value="0" readonly /></td> </tr> <tr> <td>3</td> <td>Backfilling / Earth Fill... </td> <td>Cft</td> <td><input class="multi1" value="0" type="number" /></td> <td><input class="multi2" value="120" readonly /></td> <td><input class="amount" value="0" readonly /></td> </tr> </tbody> <tfoot> <tr> <th colspan="4">Sub Total</th> <td colspan="2"><input class="subtotal" value="0" readonly /></td> </tr> </tfoot> </table> <table class="sub_table"> <thead> <tr> <th>S.No.</th> <th>EARTH WORK</th> <th>Unit </th> <th>Quantity</th> <th>Rate</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Excavation for foundation... </td> <td>Cft</td> <td><input class="multi1" value="0" type="number" /></td> <td><input class="multi2" value="25" readonly /></td> <td><input class="amount" value="0" readonly /></td> </tr> <tr> <td>3</td> <td>Backfilling / Earth Fill... </td> <td>Cft</td> <td><input class="multi1" value="0" type="number" /></td> <td><input class="multi2" value="18" readonly /></td> <td><input class="amount" value="0" readonly /></td> </tr> </tbody> <tfoot> <tr> <th colspan="4">Sub Total</th> <td colspan="2"><input class="subtotal" value="0" readonly /></td> </tr> </tfoot> </table> <p> Your Grand Total is <input class="grandtotal" value="0" readonly /> </p> 

同樣在JSFiddle上 。