"Table add row Dynamically"
Bootstrap 3.3.0 Snippet by iammahesh

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>
$(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)); }

Related: See More

Vue Material Dashboard PRO
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments:

how to insert multiple rows in sql database? if code like this

ridhohamonangan (0) - 6 years ago - Reply 0

how to insert multiple rows in mysql database? if code like this ...how get counter value on response page....

Developer2Ankit (0) - 5 years ago - Reply 0

How we can use this code in select option because whenever i try to use this code for select option it's not working.Options are see only in the first row.After adding the row i can't see the options which i used in your code.

Shubham59 (0) - 6 years ago - Reply 0

if you delete any dynamically created row, the number assigned to html-element name is repeated.

CompaJuan () - 7 years ago - Reply 0

x

milahi () - 5 years ago - Reply 0

hi , when I want use this code in jsp page in java I added cols += '<td><form:input path='+path_val+".operationType"+' type="text" class="form-control" name="op_type' + counter + '"/></td>'; mean I use <form:input> tag but after added row in to table I can't write anything in input text mean that input disable !!!! can you help me friends , thanks

fardad () - 5 years ago - Reply 0