如何获得所有动态计算的小计的总和

Question

我希望我的所有总计在最后总结，即要显示的总金额

我使用handlebars.js编码为

<input type="button" value="Add Product" onClick="addRow('dataTable')" />
  <table id="dataTable" class="form" border="0">
    <tbody>
      <tr id='row_0'>
        <p>
         <td>
            <label>productcode</label>
            <input type="text" required="required" name="pcode"    size="10px" >
        </td>
          <td>
            <label>productname</label>
            <input type="text" required="required" name="name" size="10px">
        </td>
        <td>
            <label>Quantity</label>
            <input type="text" required="required" name="qty" oninput="calculate('row_0')" size="10px">
        </td>
        <td>
            <label for="price">Price</label>
            <input type="text" required="required" class="small" name="price" oninput="calculate('row_0')" size="10px">
        </td>
        <td>
            <label for="total">Total</label>
            <input type="text" required="required" class="small"    name="total" size="10px">
        </td>
        <td>
            <label>tax</label>
            <input type="text" required="required" name="tax" oninput="calculate('row_0')" size="10px">
        </td>
        <td>
            <label>discount</label>
            <input type="text" required="required"    name="discount" oninput="calculate('row_0')" size="10px">
        </td>
          <td>
            <label>grand total</label>
            <input type="text" required="required" name="gtotal"            class="small" size="10px" >
        </td>
        <tr>
        <table class="table invoice-table text-right">
            <td style="border-top: none;"> Total Amount</td>
            <td style="border-top: none;"><strong class="total-    price">&#163;0</strong></td>
            </tr>
        </table>
        </p>
      </tr>
    </tbody>
  </table>
</html>

JS代码：

<script type="text/javascript">
  function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 200) { // limit the user from creating fields more than your   limits
      var row = table.insertRow(rowCount);
      var colCount = table.rows[0].cells.length;
      row.id = 'row_'+rowCount;
      for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.outerHTML = table.rows[0].cells[i].outerHTML;
      }
      var listitems= row.getElementsByTagName("input")
      for (i=0; i<listitems.length; i++) {
        listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
      }
    }
  }

  function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null !== chkbox && true === chkbox.checked) {
        if (rowCount <= 1) { // limit the user from removing all the fields
          alert("Cannot Remove all");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  }

  function calculate(elementID) {
    var mainRow = document.getElementById(elementID);

    var quantity = mainRow.querySelectorAll('[name=qty]')[0].value;
    var price = mainRow.querySelectorAll('[name=price]')[0].value;
    var total = mainRow.querySelectorAll('[name=total]')[0];
    var myResult1 = quantity * price;
    total.value = myResult1;
    var tax = mainRow.querySelectorAll('[name=tax]')[0].value;
    var discount = mainRow.querySelectorAll('[name=discount]')[0].value;
    var gtotal = mainRow.querySelectorAll('[name=gtotal]')[0];
    var myResult2 = ((price*quantity*tax*0.01)-(price*quantity*discount*0.01))+(price*quantity);
    gtotal.value = myResult2;
  }
</script>

现在总额应自动汇总并以总金额显示