<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"> <div class="row"> <div class="row col-xs-12> <div class="col-xs-8 col-xs-offset-2"> <div class="input-group col-xs-6"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Invoice Month</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#Jjanuary">January</a></li> <li><a href="#february">February</a></li> <li><a href="#march">March</a></li> <li class="divider"></li> <li><a href="#all">Anything</a></li> </ul> </div> <input type="hidden" name="search_param" value="all" id="search_param"> <input type="text" class="form-control" name="x" placeholder="Search for customer..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </div> </div> </br> <div class="row well"> <div class="row"> <div class="col-xs-12"> <div class="invoice-title"> <h2>Invoice</h2><h3 class="pull-right">Order # 12345</h3> </div> <hr> <div class="row"> <div class="col-xs-6"> <address> <strong>Billed To:</strong><br> {{Company.Name}}<br> {{Company.Address}}<br> </address> </div> <div class="col-xs-6 text-right"> <address> <strong>Service From:</strong><br> Jane Smith<br> 1234 Main<br> Apt. 4B<br> Springfield, ST 54321 </address> </div> </div> <div class="row"> <div class="col-xs-6"> <address> <strong>Payment Method:</strong><br> Visa ending **** 4242<br> {{Customer.Email}} </address> </div> <div class="col-xs-6 text-right"> <address> <strong>Order Date:</strong><br> March 7, 2014<br><br> </address> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <strong>Order summary</strong> </h3> </div> <div class="panel-body"> <div class="table-responsive"> <table class="table table-condensed"> <thead> <!--Grid--> <!--http://bootsnipp.com/snippets/1KmWy--> <thead> <div class="panel-body"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr > <th>Case Number</th> <th>Case Record Type</th> <th>AC Dealer Id</th> <th>Dealership Name</th> <th>Polling Frequency</th> <th>Monthly Fee</th> <th></th> <th>Setup Fee</th> </tr> </thead> <tbody> <tr id='addr0'> <td> 1 </td> <td> <input type="text" name='origin0' placeholder='CYQT' class="form-control"/> </td> <td> <input type="text" name='est_departure0' placeholder='2014-06-01 13:45' class="form-control"/> </td> <td> <input type="text" name='act_departure0' placeholder='2014-06-01 13:45' class="form-control"/> </td> <td> <input type="text" name='destination0' placeholder='CYEL' class="form-control"/> </td> <td> <input type="text" name='destination0' placeholder='CYEL' class="form-control"/> </td> <td> <input type="text" name='destination0' placeholder='CYEL' class="form-control"/> </td> <td> <input type="text" name='destination0' placeholder='CYEL' class="form-control"/> </td> </tr> </tr> <tr id='addr1'></tr> </tbody> </table> <a id="add_row" class="btn btn-primary btn-success"><span class="glyphicon glyphicon-plus"></span> Add New Item</a> <a id="delete_row" class="btn btn-primary btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span> Remove Line Item</a> </div> </div> <div> <div class="panel-footer"> </div> <a href="#" class="save pull-right"><button type="button" class="btn btn-lg btn-primary""><i class="fa fa-spinner fa-spin"></i> Save</button> </div> </div> </div> </div> </div> <!--End Grid--> </tbody> </table> </div> </div> </div> </div> </div> <div class="row col-xs-12> <div class="col-xs-8 col-xs-offset-2"> <div> <container> <a href="#" class="export"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-download-alt"></span> Download table data into Excel </button></a> <a href="#" class="send"><button type="button" onclick="location.href ='/billing/invoice/id?generate=xls';" class="btn btn default btn-lg"><span class="glyphicon glyphicon-send"></span> Send Excel Invoice to Customer </button></a> <a href="#" class="upload"><button type="button" class="btn btn-default btn-lg disabled"><span class="glyphicon glyphicon-export"></span> Export Invoice to Peachtree </button></a> <a href="#" class="print"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-print"></span> Print Invoice </button></a> </container> </div> </div>

body{ margin-top:20px; } .invoice-title h2, .invoice-title h3 { display: inline-block; } .table > tbody > tr > .no-line { border-top: none; } .table > thead > tr > .no-line { border-bottom: none; } .table > tbody > tr > .thick-line { border-top: 2px solid; }

$(document).ready(function(){ var i=1; $("#add_row").click(function(){ $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='origin"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='est_departure"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='act_departure"+i+"' type='text' class='form-control input-md'></td><td><input name='destination"+i+"' type='text' class='form-control input-md'></td><td><input name='est_arrival"+i+"' type='text' class='form-control input-md'/></td><td><input name='act_arrival"+i+"' type='text' class='form-control input-md' /></td><td><input name='aircraft"+i+"' type='text' class='form-control input-md' /></td>"); $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); i++; }); $("#delete_row").click(function(){ if(i>1){ $("#addr"+(i-1)).html(''); i--; } }); });