"test"
Bootstrap 4.1.1 Snippet by vigneshkv23

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <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> </head> <body> <div class="container-fluid"> <form> <h3 class="heading">SALES ENTRY </h3> <div> <div class="row"> <div class="form-group col-sm-3"> <label for="date">Name <span>*</span></label> <input class="form-control" type="date" value="" name="date" id="date"> </div> <div class="form-group col-sm-3"> <label for="bill-type">Bill Type <span>*</span></label> <select class="form-control" id="bill-type"> <option value="" name="">Bill Type</option> <option value="cash" name="cash">cash</option> <option value="credit" name="credit">credit</option> </select> </div> <div class="form-group col-sm-3"> <label for="name">Customer Name <span>*</span></label> <input type="text" class="form-control" value="" name="name" placeholder="Name" id="name"> </div> <div class="form-group col-sm-3"> <label for="vechicle">Vehicle</label> <input type="text" class="form-control" value="" name="vehicle" placeholder="Vehicle" id="vechicle"> </div> </div> <div class="row"> <div class="form-group col-sm-3"> <label for="shift">Shift <span>*</span></label> <select class="form-control"> <option value="" name="">Shift</option> <option value="" name="day">Day-Shift</option> <option value="" name="night">Night-Shift</option> </select> </div> <div class="form-group col-sm-3"> <label for="rec-name">Receiver Name<span>*</span></label> <input type="text" class="form-control" value="" name="rec-name" placeholder="Rec.Name"> </div> <div class="form-group col-sm-3"> <label for="rec-name">Receiver Mobile<span>*</span></label> <input type="text" class="form-control" value="" name="rec-mobile" placeholder="Rec.Mobile"> </div> </div> </div> <div class="table-responsive"> <table id="myTable" class=" table order-list"> <colgroup> <col width="2%" /> <col width="44%" /> <col width="10%" /> <col width="14%" /> <col width="14%" /> <col width="14%" /> <col width="2%" /> <col /> </colgroup> <thead> <tr> <th>#</th> <th>Product</th> <th>Metric</th> <th>Rate</th> <th>Quantity</th> <th>Amount</th> <th>Del</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select class='form-control'> <option value='' name=''>Product</option> <option value='' name='product-1'>Product-1</option> <option value='' name='Product-2'>Product-2</option> </select> </td> <td></td> <td> <input type='text' class='form-control align-right' value='' name='rate' placeholder='0'> </td> <td> <input type='text' class='form-control align-right' value='' name='Quantity' placeholder='0'> </td> <td> <input type='text' class='form-control align-right' value='' name='amount' placeholder='0'> </td> <td> <button type='button' class='form-control btn btn-danger'>X</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="6" class="align-right"> <div class="font-align placeholder-clr">Total: <input type="text" class="tot-box" value="" name="amount" placeholder="0.00"> </div> </td> <td></td> </tr> </tfoot> </table> <button type="button" class="btn btn-color" id="addrow" value="Add Row"><img src="img/add.png" alt="add.png"> Product Details</button> <div class="row"> <div class="col-sm-6"> <label>Reference</label> <textarea class="form-control" value="" rows="5"></textarea> </div> <div class="form-group col-sm-3"> <label>Total Amount<span>*</span></label> <input type="text" class="form-control text-box-size align-right" name="total-amount" value="" placeholder="0"> <h4>Payable Amount</h4> <p>Total Payable Amount</p> </div> <div class="form-group col-sm-3"> <label>Discount Amount</label> <input type="text" class="form-control text-box-size align-right" name="total-amount" value="" placeholder="0"> <div class="pay-color move"> <h3>₹<input type="text" class="text-box-size pay-box" value="" name="total-pay" placeholder=" 0.00"></h3> </div> </div> </div> </div> </form> </div> </body> </html>
body { width: 100%; font-family: Arial, Helvetica, sans-serif; } form { margin-top: 2%; width: 100%; } table { border-collapse: collapse; } td, th { border: 1px solid gray !important; } th { text-align: center; } span { color: red; } .heading { background-color: #f2f2f2; padding: 8px; } .tot-box { width: 7%; height: auto; padding: 0px; border: hidden; margin-bottom: 0px; text-align: right; } .font-align { color: #1002b1; font-size: 20px; font-weight: 500; } .placeholder-clr input[type="text"], .placeholder-clr input::placeholder { color: #1002b1; background-color: #f2f2f2; font-weight: 500; } .align-right { text-align: right; } .float-right { float: right; } .btn-color { color: #00cc99; background-color: transparent; border: none; } .btn-color:hover { background-color: transparent; } .text-box-size { width: 75%; } .pay-box { background-color: transparent; border: none; } .pay-color h3, .pay-color input[type="text"], .pay-color input::placeholder { color: #00cc99; font-weight: 400; } .move { margin-top: 8%; margin-left: 15%; } th, tfoot>tr { background-color: #f2f2f2; } .add-product-align { margin-top: -1%; } .add-product-align img { height: 18px; width: 18px; margin-top: -4px; }
$(document).ready(function() { var counter = 0; var count = 1; $("#addrow").on("click", function() { var newRow = $("<tr>"); var cols = ""; count++; cols += '<td>' + count + '</td>'; cols += '<td><select class="form-control"><option value="" name="">Product</option><option value="" name="product-1">Product-1</option><option value="" name="Product-2">Product-2</option></select></td>'; cols += '<td></td>'; cols += '<td><input type="text" class="form-control align-right" value="" name="rate" placeholder="0"></td>'; cols += '<td><input type="text" class="form-control align-right" value="" name="Quantity" placeholder="0"></td>'; cols += '<td><input type="text" class="form-control align-right" value="" name="amount" placeholder="0"></td>'; cols += '<td><button type="button" class="ibtnDel form-control btn btn-danger">X</button></td>'; newRow.append(cols); $("table.order-list").append(newRow); counter++; }); $("table.order-list").on("click", ".ibtnDel", function(event) { $(this).closest("tr").remove(); counter -= 1 count--; }); });

Related: See More

Material Kit PRO React

Questions / Comments: