"SEA SERVICE RECORD 15 Rows"
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>Bootstrap 101 Template</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"> <td>2</td><td><input name="name_of_vessel1" type="text" class="form-control input-md"> </td><td><input name="rank1" type="text" class="form-control input-md"></td><td><input name="name1" type="text" class="form-control input-md"></td><td><input name="grt1" type="text" class="form-control input-md"></td><td><input name="bhp1" type="text" class="form-control input-md"></td><td><input name="main_engin1" type="text" class="form-control input-md"></td><td><input name="sing_off1" type="text" class="form-control input-md"></td><td><input name="ship_owner1" type="text" class="form-control input-md"></td></tr> <tr id="addr2"><td>3</td><td><input name="name_of_vessel2" type="text" class="form-control input-md"> </td><td><input name="rank2" type="text" class="form-control input-md"></td><td><input name="name2" type="text" class="form-control input-md"></td><td><input name="grt2" type="text" class="form-control input-md"></td><td><input name="bhp2" type="text" class="form-control input-md"></td><td><input name="main_engin2" type="text" class="form-control input-md"></td><td><input name="sing_off2" type="text" class="form-control input-md"></td><td><input name="ship_owner2" type="text" class="form-control input-md"></td></tr> <tr id="addr3"><td>4</td><td><input name="name_of_vessel3" type="text" class="form-control input-md"> </td><td><input name="rank3" type="text" class="form-control input-md"></td><td><input name="name3" type="text" class="form-control input-md"></td><td><input name="grt3" type="text" class="form-control input-md"></td><td><input name="bhp3" type="text" class="form-control input-md"></td><td><input name="main_engin3" type="text" class="form-control input-md"></td><td><input name="sing_off3" type="text" class="form-control input-md"></td><td><input name="ship_owner3" type="text" class="form-control input-md"></td></tr><tr id="addr4"><td>5</td><td><input name="name_of_vessel4" type="text" class="form-control input-md"> </td><td><input name="rank4" type="text" class="form-control input-md"></td><td><input name="name4" type="text" class="form-control input-md"></td><td><input name="grt4" type="text" class="form-control input-md"></td><td><input name="bhp4" type="text" class="form-control input-md"></td><td><input name="main_engin4" type="text" class="form-control input-md"></td><td><input name="sing_off4" type="text" class="form-control input-md"></td><td><input name="ship_owner4" type="text" class="form-control input-md"></td></tr><tr id="addr5"><td>6</td><td><input name="name_of_vessel5" type="text" class="form-control input-md"> </td><td><input name="rank5" type="text" class="form-control input-md"></td><td><input name="name5" type="text" class="form-control input-md"></td><td><input name="grt5" type="text" class="form-control input-md"></td><td><input name="bhp5" type="text" class="form-control input-md"></td><td><input name="main_engin5" type="text" class="form-control input-md"></td><td><input name="sing_off5" type="text" class="form-control input-md"></td><td><input name="ship_owner5" type="text" class="form-control input-md"></td></tr><tr id="addr6"><td>7</td><td><input name="name_of_vessel6" type="text" class="form-control input-md"> </td><td><input name="rank6" type="text" class="form-control input-md"></td><td><input name="name6" type="text" class="form-control input-md"></td><td><input name="grt6" type="text" class="form-control input-md"></td><td><input name="bhp6" type="text" class="form-control input-md"></td><td><input name="main_engin6" type="text" class="form-control input-md"></td><td><input name="sing_off6" type="text" class="form-control input-md"></td><td><input name="ship_owner6" type="text" class="form-control input-md"></td></tr><tr id="addr7"><td>8</td><td><input name="name_of_vessel7" type="text" class="form-control input-md"> </td><td><input name="rank7" type="text" class="form-control input-md"></td><td><input name="name7" type="text" class="form-control input-md"></td><td><input name="grt7" type="text" class="form-control input-md"></td><td><input name="bhp7" type="text" class="form-control input-md"></td><td><input name="main_engin7" type="text" class="form-control input-md"></td><td><input name="sing_off7" type="text" class="form-control input-md"></td><td><input name="ship_owner7" type="text" class="form-control input-md"></td></tr><tr id="addr8"><td>9</td><td><input name="name_of_vessel8" type="text" class="form-control input-md"> </td><td><input name="rank8" type="text" class="form-control input-md"></td><td><input name="name8" type="text" class="form-control input-md"></td><td><input name="grt8" type="text" class="form-control input-md"></td><td><input name="bhp8" type="text" class="form-control input-md"></td><td><input name="main_engin8" type="text" class="form-control input-md"></td><td><input name="sing_off8" type="text" class="form-control input-md"></td><td><input name="ship_owner8" type="text" class="form-control input-md"></td></tr><tr id="addr9"><td>10</td><td><input name="name_of_vessel9" type="text" class="form-control input-md"> </td><td><input name="rank9" type="text" class="form-control input-md"></td><td><input name="name9" type="text" class="form-control input-md"></td><td><input name="grt9" type="text" class="form-control input-md"></td><td><input name="bhp9" type="text" class="form-control input-md"></td><td><input name="main_engin9" type="text" class="form-control input-md"></td><td><input name="sing_off9" type="text" class="form-control input-md"></td><td><input name="ship_owner9" type="text" class="form-control input-md"></td></tr><tr id="addr10"><td>11</td><td><input name="name_of_vessel10" type="text" class="form-control input-md"> </td><td><input name="rank10" type="text" class="form-control input-md"></td><td><input name="name10" type="text" class="form-control input-md"></td><td><input name="grt10" type="text" class="form-control input-md"></td><td><input name="bhp10" type="text" class="form-control input-md"></td><td><input name="main_engin10" type="text" class="form-control input-md"></td><td><input name="sing_off10" type="text" class="form-control input-md"></td><td><input name="ship_owner10" type="text" class="form-control input-md"></td></tr><tr id="addr11"><td>12</td><td><input name="name_of_vessel11" type="text" class="form-control input-md"> </td><td><input name="rank11" type="text" class="form-control input-md"></td><td><input name="name11" type="text" class="form-control input-md"></td><td><input name="grt11" type="text" class="form-control input-md"></td><td><input name="bhp11" type="text" class="form-control input-md"></td><td><input name="main_engin11" type="text" class="form-control input-md"></td><td><input name="sing_off11" type="text" class="form-control input-md"></td><td><input name="ship_owner11" type="text" class="form-control input-md"></td></tr><tr id="addr12"><td>13</td><td><input name="name_of_vessel12" type="text" class="form-control input-md"> </td><td><input name="rank12" type="text" class="form-control input-md"></td><td><input name="name12" type="text" class="form-control input-md"></td><td><input name="grt12" type="text" class="form-control input-md"></td><td><input name="bhp12" type="text" class="form-control input-md"></td><td><input name="main_engin12" type="text" class="form-control input-md"></td><td><input name="sing_off12" type="text" class="form-control input-md"></td><td><input name="ship_owner12" type="text" class="form-control input-md"></td></tr><tr id="addr13"><td>14</td><td><input name="name_of_vessel13" type="text" class="form-control input-md"> </td><td><input name="rank13" type="text" class="form-control input-md"></td><td><input name="name13" type="text" class="form-control input-md"></td><td><input name="grt13" type="text" class="form-control input-md"></td><td><input name="bhp13" type="text" class="form-control input-md"></td><td><input name="main_engin13" type="text" class="form-control input-md"></td><td><input name="sing_off13" type="text" class="form-control input-md"></td><td><input name="ship_owner13" type="text" class="form-control input-md"></td></tr><tr id="addr14"><td>15</td><td><input name="name_of_vessel14" type="text" class="form-control input-md"> </td><td><input name="rank14" type="text" class="form-control input-md"></td><td><input name="name14" type="text" class="form-control input-md"></td><td><input name="grt14" type="text" class="form-control input-md"></td><td><input name="bhp14" type="text" class="form-control input-md"></td><td><input name="main_engin14" type="text" class="form-control input-md"></td><td><input name="sing_off14" type="text" class="form-control input-md"></td><td><input name="ship_owner14" type="text" class="form-control input-md"></td></tr><tr id="addr15"></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> </body> </html>
$(document).ready(function(){ var i=15; $("#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

Vue Material Kit
Carousel Rows

Questions / Comments: