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>