table subtotal and grandtotal not calculating

Question

I have a table which contains table head and dynamically row adding.

I want to calculate subtotal and grand total. I successfully created add rows. When I try to put data the total was not displayed

I tried like this but it does not work

 $(document).ready(function() { addRow(); var $tblrows = $("#detailTable tbody tr"); $tblrows.each(function(index) { var $tblrow = $(this); $tblrow.find('.Qty').on('change', function() { var qty = $tblrow.find("[name=Qty]").val(); var price = $tblrow.find("[name=Price]").val(); var subTotal = parseInt(qty, 10) * parseFloat(price); // alert("line1"); if (!isNaN(subTotal)) { // alert("line2"); $tblrow.find('.total').val(subTotal.toFixed(2)); var grandTotal = 0; // alert("alert subtotal"); $(".total").each(function() { var stval = parseFloat($(this).val()); grandTotal += isNaN(stval) ? 0 : stval; }); $('.grdtot').val(grandTotal.toFixed(2)); } }); }); $("#detailTable input").focus(function() { $(this).parent().addClass("highlighted"); }); }); function addRow() { var rowCount = $("#detailTable>tbody>tr").length; $("#detailTable>tbody").append('<tr><td><input name="ProductName" required></td><td><input name="Qty" class="Qty" required></td><td><input name="Price" required></td><td><input name="total" required></td><td><a onclick="deleteRow(' + rowCount + ')">Delete</a></td></tr>') $("tr:odd").css("background-color", "#ccc"); } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-striped" id="detailTable"> <thead> <tr> <div class="col-sm-2"> <th>ProductName</th> </div> <div class="col-sm-2"> <th>Qty</th> </div> <div class="col-sm-2"> <th>Price</th> </div> <div class="col-sm-2"> <th>Total</th> </div> <div class="col-sm-2"> <th><button type="button" onclick="addRow()" class="btn btn-info">Add Row</button></th> </div> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td><input type="text" class="grdtot" value="" name="" /></td> </tr> </tfoot> </table> 

Answer 1

Several issues.

Here is a solution using delegation and I fixed your missing total class and changed the grand total to an ID and removed the inline delete

 $(document).ready(function() { addRow(); $("#detailTable").on("input","tbody>tr input", function() { $("#detailTable tbody>tr").each(function(index) { var $tblrow = $(this); var qty = $tblrow.find("[name=Qty]").val(); var price = $tblrow.find("[name=Price]").val(); var subTotal = parseInt(qty, 10) * parseFloat(price); if (!isNaN(subTotal)) { $tblrow.find('.total').val(subTotal.toFixed(2)); var grandTotal = 0; $(".total").each(function() { var stval = parseFloat($(this).val()); grandTotal += isNaN(stval) ? 0 : stval; }); $('#grdtot').val(grandTotal.toFixed(2)); } }); }); $("#detailTable").on("click",".del",function(e) { e.preventDefault(); $(this).closest("tr").remove(); }) $("#detailTable").on("focus","input", function() { $(this).closest("td").addClass("highlighted"); }); }); function addRow() { var rowCount = $("#detailTable>tbody>tr").length; $("#detailTable>tbody").append('<tr><td><input name="ProductName" required></td><td><input name="Qty" class="Qty" required></td><td><input name="Price" required></td><td><input class="total" name="total" readonly></td><td><a class="del" href="#">Delete</a></td></tr>') $("tr:odd").css("background-color", "#ccc"); } 

 .highlighted { background-color: green } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table class="table table-striped" id="detailTable"> <thead> <tr> <div class="col-sm-2"> <th>ProductName</th> </div> <div class="col-sm-2"> <th>Qty</th> </div> <div class="col-sm-2"> <th>Price</th> </div> <div class="col-sm-2"> <th>Total</th> </div> <div class="col-sm-2"> <th><button type="button" onclick="addRow()" class="btn btn-info">Add Row</button></th> </div> </tr> </thead> <tbody></tbody> <tfoot> <tr> <td></td> <td></td> <td></td> <td><input type="text" id="grdtot" value="" name="" /></td> </tr> </tfoot> </table>