Bootstrap 3.0.1 Snippet by vikasgupta001

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row main"> <div class="main-login main-center"> <h5>Sign up once and watch any of our free demos.</h5> <form class="" method="post" action="#"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Your Name</label> <div class="cols-sm-10"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span> <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/> </div> </div> </div> <div class="form-group "> <button type="button" id="add_row" onclick="addRow()" class="btn btn-primary btn-lg btn-block login-button">Register</button> </div> </form> </div> </div> </div> <div class="container"> <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"> # </th> <th class="text-center"> User </th> </tr> </thead> <tbody> <tr id="addr0"><td>1</td><td><span id="user0"></span></td></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>
/* /* Created by Filipe Pina * Specific styles of signin, register, component */ /* * General styles */ #playground-container { height: 500px; overflow: hidden !important; -webkit-overflow-scrolling: touch; } body, html{ height: 100%; background-repeat: no-repeat; font-family: 'Oxygen', sans-serif; background-size: cover; } .main{ margin:50px 15px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; color: #fff; } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .form-control { height: auto!important; padding: 8px 12px !important; } .input-group { -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important; -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important; } #button { border: 1px solid #ccc; margin-top: 28px; padding: 6px 12px; color: #666; text-shadow: 0 1px #fff; cursor: pointer; -moz-border-radius: 3px 3px; -webkit-border-radius: 3px 3px; border-radius: 3px 3px; -moz-box-shadow: 0 1px #fff inset, 0 1px #ddd; -webkit-box-shadow: 0 1px #fff inset, 0 1px #ddd; box-shadow: 0 1px #fff inset, 0 1px #ddd; background: #f5f5f5; background: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -o-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: -ms-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); background: linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 400px; padding: 10px 40px; background:#009edf; color: #FFF; text-shadow: none; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31); } span.input-group-addon i { color: #009edf; font-size: 17px; } .login-button{ margin-top: 5px; } .login-register{ font-size: 11px; text-align: center; }
var i=1; function addRow(){ console.log('**',$('#name').val(),i); var previousRow=i-1 $('#user'+previousRow).text($('#name').val()); $('#addr'+i).html("<td>"+ (i) +"</td><td><span id='user"+i+"'></span></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

Questions / Comments: