joe dynamic table

by Joe

HTML

<div class="container">
  <table id="myTable" class=" table order-list">
    <thead>
      <tr>
        <td>Name</td>
        <td>Gmail</td>
        <td>Phone</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-sm-4">
          <input type="text" name="name" class="form-control" />
        </td>
        <td class="col-sm-4">
          <input type="mail" name="mail" class="form-control" />
        </td>
        <td class="col-sm-3">
          <input type="text" name="phone" class="form-control" />
        </td>
        <td class="col-sm-2"><a class="deleteRow"></a>

        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5" style="text-align: left;">
          <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
        </td>
      </tr>
      <tr>
      </tr>
    </tfoot>
  </table>
</div>

JavaScript

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></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) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});



function calculateRow(row) {
  var price = +row.find('input[name^="price"]').val();

}

function calculateGrandTotal() {
  var grandTotal = 0;
  $("table.order-list").find('input[name^="price"]').each(function() {
    grandTotal += +$(this).val();
  });
  $("#grandtotal").text(grandTotal.toFixed(2));
}