无法在Ajax计算表格中获得总计

Question

I created a form like this:

The problem is that I am unable to get the grand total of the sub total fields.

I tried to create grand total fields same as sub total but no luck. I wonder if I made a mistake not to create some variables globally? Is there is any simple solution to do that? You can find the whole code here: 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

On each function when you update sub total then you also get every sub total and sum all of these and put in sub total . Follow steps :-

1. Get the value of each sub total in grand_total() function

    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. call this function in your each keyup/mouseup function. like this:-

    $("#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

The way you do calculations via script is really dramatic. Writing a function for each row in table has no sense - because you ended with more than 100 of function definitions.

Therefor you have to restructure code and re-use same (one) function to calculate sum. Below you can see how it can be done, hope you get an idea:

 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> 

Also on JSFiddle .