using this code i can already calculate two value in row now I am trying to sum column values below local column field all column value with this,
<table class="table order-list turf" id="turf"> <tr> <td>Items</td> <td>Local</td> <td>Foreign</td> <td>Total</td> </tr> <tr> <td class="col-sm-3"><input type="text" name="" value="item1"></td> <td class="col-sm-3 calculated_value"> <input type="text" name="value1[]" class="calculated_value"/></td> <td class="col-sm-3 calculated_value"> <input type="text" name="value2[]" class="form-control calculated_value" /> </td> <td class="col-sm-3 total"> <input type="text" name="total[]" class="form-control total" id="total" readonly="" /> </td> <td class="col-sm-2"><a class="deleteRow"></a> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /> </td> </tr> <tr class="grand-total persist"> <td>Total Investment</td> <td id="local_total"><input type="text" readonly="" name=""></td> <td id="foreign_total"><input type="text" readonly="" name=""></td> <td id="total_total"><input type="text" readonly="" name=""></td> </tr> </table> var counter = 1; $("body").on("input", ".calculated_value", function() { var parent_row = $(this).closest('tr'); var totalincome = 0; parent_row.find('.calculated_value').each(function() { totalincome += parseInt($(this).val() || 0); }); parent_row.find(".total").val(totalincome);
Advertisement
Answer
I hope this is what you need. Code could be refactored but I think you can do it yourself.
$(document).ready(function() { var counter = 1; $("body").on("input", ".calculated_value", function() { calculate(this); }); function calculate(elm) { var parent_row = $(elm).closest('tr'); var elTotalIncome = $("#local_milion_grand_total").find("input"); var elTotalForeign = $("#foreign_milion_grand_total").find("input"); var elTotal = $('#total_milion_grand_total').find("input"); var totalincome = 0; var totalLocal = 0; var totalForeign = 0; var total = 0; parent_row.find('.calculated_value').each(function() { totalincome += parseInt($(this).val() || 0); }); parent_row.find('.total').val(totalincome); for (i = 0; i < $("tbody tr").length; i++) { let elCol = $($("tbody tr")[i]).find("td input"); let tmp = parseInt(elCol[1].value); let tmp2 = parseInt(elCol[2].value); let tmp3 = parseInt(elCol[3].value); if (isNaN(tmp)) tmp = 0; if (isNaN(tmp2)) tmp2 = 0; if (isNaN(tmp3)) tmp3 = 0; totalLocal += tmp; totalForeign += tmp2; total += tmp3; } elTotal.val(total); elTotalIncome.val(totalLocal); elTotalForeign.val(totalForeign); } //add new row button $("#addrow").on("click", function() { var newRow = $("<tr>"); var cols = ""; cols += '<td><input type="text" value="Item ' + counter + '"></td>'; cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>'; cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>'; cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; }); $("table.order-list").on("click", ".ibtnDel", function(event) { if (counter == 1) return; $(this).closest("tr").remove(); counter -= 1 calculate(this); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table class="table order-list turf" id="turf"> <thead> <tr> <td>Items</td> <td>Local(Milion Taka/Milion US$)</td> <td>Foreign(Milion Taka/Milion US$)</td> <td>Total(Milion Taka/Milion US$)</td> <td> <input type="button" class="btn btn-sm btn-success " id="addrow" value="Add" /></td> </tr> </thead> <tbody> <tr> <td class="col-sm-3"> <input type="text" name="" value="item1"> </td> <td class="col-sm-3 calculated_value"> <input type="text" name="value1[]" class="form-control calculated_value_row calculated_value" /> </td> <td class="col-sm-3 calculated_value"> <input type="text" name="value2[]" class="form-control calculated_value_row calculated_value" /> </td> <td class="col-sm-3 total"> <input type="text" name="total[]" class="form-control total" id="total" readonly="" /> </td> <td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td> </tr> </tbody> <tfoot> <tr class="grand-total persist"> <td>Total Investment</td> <td id="local_milion_grand_total"><input type="text" class="form-control local_milion_grand_total" readonly="" name=""></td> <td id="foreign_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td> <td id="total_milion_grand_total"><input type="text" class="form-control" readonly="" name=""></td> </tr> </tfoot> </table>