删除表中的行时更新总计

Question

我有一个html表，其中总金额在输入新值时没有得到更新，也没有得到更新。它只显示NaN。 这是javascript代码：

function totamt(){
    var table = document.getElementById("stock");
    var total = document.getElementById("total");
    var tot = 0;
    for(var i=0;i<table.rows.length;i++){
        var currentRow = table.rows[i];
        tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
    }
    alert(tot.toString());
    document.getElementById('total').innerHTML = tot.toString();

}

$('body').delegate('.remove','click',function(){
    $(this).parent().parent().remove();
    totalamt();
});

交互式代码段

＆＃13;

＆＃13;

$(function() {
  $('#add').click(function() {
    addnewrow();
  });
  $('body').delegate('.remove', 'click', function() {
    $(this).parent().parent().remove();
    totalamt();

    $('.details').delegate('.qty,.price', 'keyup', function() {
      var tr = $(this).parent().parent();
      var q = tr.find('.qty').val();
      var p = tr.find('.price').val();

      var a = (q * p);
      tr.find('.amt').val(a);

      totamt();
    });

    function totamt() {
      var table = document.getElementById("stock");
      var total = document.getElementById("total");
      var tot = 0;
      for (var i = 0; i < table.rows.length; i++) {
        var currentRow = table.rows[i];
        tot = tot + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
      }
      alert(tot.toString());
      document.getElementById('total').innerHTML = tot.toString();
    }

    function addnewrow() {
      var n = ($('.details tr').length - 0) + 1;
      var tr = '<tr>' +
          '<td class="no">' + n + '</td>' +
          '<td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>' +
          '<td><textarea name="size" id="size" class="form-control size" autocomplete="off"></textarea></td>' +
          '<td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off"/></td>' +
          '<td><input type="text" name="unit" id="unit" class="form-control unit" autocomplete="off"/></td>' +
          '<td><input type="text" name="price" id="price" class="form-control price" autocomplete="off"/></td>' +
          '<td><input type="text" name="tax" id="tax" class="form-control tax" data-provide="typeahead" autocomplete="off" /></td>' +
          '<td><input type="text" name="dis" id="dis" class="form-control dis" autocomplete="off" /></td>' +
          '<td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>' +
          '<td><button class="btn btn-danger remove">X</button></td>' +
          '</tr>';
      $('.details').append(tr);
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table table-bordered" id="stock">
  <thead>
    <tr>
      <td>Sr no.</td>
      <td>Product Name</td>
      <td>Qty</td>
      <td>Rate</td>
      <td>Total</td>
      <td><input type="button" name="add" id="add" value="+" class="btn btn-warning" /></td>
    </tr>
  </thead>
  <tbody class="details">
    <tr>
      <td class="no">1</td>
      <td><input type="text" name="items" id="items" class="form-control items" data-provide="typeahead" autocomplete="off" /></td>
      <td><input type="text" name="qty" id="qty" class="form-control qty" autocomplete="off" /></td>
      <td><input type="text" name="price" id="price" class="form-control price" autocomplete="off" /></td>
      <td><input type="text" name="amt" id="amt" class="form-control amt" autocomplete="off" /></td>
      <td><button class="btn btn-danger remove">X</button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" style="text-align:right;">Total</th>
      <th colspan="2" id="total" class="total"><b>$</b></th>
    </tr>
  </tfoot>
</table>

＆＃13;

＆＃13;

＆＃13;