"SEA SERVICE RECORD "
Bootstrap 3.3.0 Snippet by KOTMTH

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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>SEA SERVICE RECORD </title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr > <th class="text-center"> NO </th> <th class="text-center"> Name of Vessel </th> <th class="text-center"> Rank </th> <th class="text-center"> Type </th> <th class="text-center"> GRT </th> <th class="text-center"> BHP </th> <th class="text-center"> Main Engine </th> <th class="text-center"> Sign Off </th> <th class="text-center"> Ship Owner </th> </tr> </thead> <tbody> <tr id='addr0'> <td> 1 </td> <td> <input type="text" name='name_of_vessel0' class="form-control"/> </td> <td> <input type="text" name='rank0' class="form-control"/> </td> <td> <input type="text" name='name0' class="form-control"/> </td> <td> <input type="text" name='grt0' class="form-control"/> </td> <td> <input type="text" name='bhp0' class="form-control"/> </td> <td> <input type="text" name='main_engin0' class="form-control"/> </td> <td> <input type="text" name='sing_off0' class="form-control"/> </td> <td> <input type="text" name='ship_owner0' class="form-control"/> </td> </tr> <tr id='addr1'></tr> </tbody> </table> </div> </div> <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
$(document).ready(function(){ var i=1; $("#add_row").click(function(){ $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name_of_vessel"+i+"' type='text' class='form-control input-md' /> </td><td><input name='rank"+i+"' type='text' class='form-control input-md'></td><td><input name='name"+i+"' type='text' class='form-control input-md'></td><td><input name='grt"+i+"' type='text' class='form-control input-md'></td><td><input name='bhp"+i+"' type='text' class='form-control input-md'></td><td><input name='main_engin"+i+"' type='text' class='form-control input-md'></td><td><input name='sing_off"+i+"' type='text' class='form-control input-md'></td><td><input name='ship_owner"+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--; } }); });

Related: See More

Paper Kit 2

Questions / Comments: