<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>Thông tin sản phẩm</td> </tr> </thead> <tbody> <tr> <td class="col-sm-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-tag"></i></span> <input id="product.name" type="text" class="form-control" name="product.name" placeholder="Tên sản phẩm"> </div> </td> <td class="col-sm-2"> <div class="input-group"> <span class="input-group-addon"><i class=" glyphicon glyphicon-link"></i></span> <input id="product.link" type="text" class="form-control" name="product.link" placeholder="Link sản phẩm"> </div> </td> <td class="col-sm-2"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span> <input id="product.quantity" type="text" class="form-control" name="product.quantity" placeholder="Số lượng"> </div> <td class="col-sm-2"> <div class="input-group"> <label class="input-group-btn"> <span class="btn btn-primary"> Upload hình ảnh<input type="file" style="display: none;" multiple> </span> </label> <input type="text" class="form-control" readonly> </div> </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="Thêm sản phẩm" /> </td> </tr> <tr> </tr> </tfoot> </table> </div>

$(document).ready(function () { var counter = 0; $("#addrow").on("click", function () { var newRow = $("<tr>"); var cols = ""; cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-tag"></i></span><input id="product.name" type="text" class="form-control" name="product.name' + counter + '" placeholder="Tên sản phẩm"></div></td>'; cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-link"></i></span><input id="product.link" type="text" class="form-control" name="product.link' + counter + '" placeholder="Link sản phẩm"></div></td>'; cols += '<td><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i></span><input id="product.quantity" type="text" class="form-control" name="product.quantity' + counter + '" placeholder="Số lượng"></div></td>'; cols += '<td><div class="input-group"><label class="input-group-btn"><span class="btn btn-primary">Upload hình ảnh<input type="file" style="display: none;" multiple></span></label><input type="text" class="form-control" name="product.file' + counter + '" readonly></div></td>'; cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Xóa"></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() { // We can attach the `fileselect` event to all file inputs on the page $(document).on('change', ':file', function() { var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1, label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [numFiles, label]); }); // We can watch for our custom `fileselect` event like this $(document).ready( function() { $(':file').on('fileselect', function(event, numFiles, label) { var input = $(this).parents('.input-group').find(':text'), log = numFiles > 1 ? numFiles + ' files selected' : label; if( input.length ) { input.val(log); } else { if( log ) alert(log); } }); }); }); 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)); }