"Dynamic table"
Bootstrap 3.0.0 Snippet by Nirmaan

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <br /> <div class="container-fluid"> <div class="row clearfix" align="left"> <div class="col-md-2"> <a id="add_row" class="btn btn-default">Add Row</a><p></p> <a id='delete_row' class="btn btn-default">Delete Row</a><p></p> <a id="appendToColumn" class="btn btn-default">Add Column</a><p></p> <a id='delete_column' class="btn btn-default">Delete Column</a><p></p> </div> <div class="col-md-10"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr> <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Mail </th> <th id="addc0" class="text-center"> Mobile </th> <th id="addc1"></th> </tr> </thead> <tbody> <tr id='addr0'> <td>1</td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Mail' class="form-control"/> </td> <td> <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/> </td> </tr> <tr id='addr1'></tr> </tbody> </table> </div> </div> <br /><br /> </div> </body> </html>
$(document).ready(function(){ var i=1; var j = 1; $("#add_row").click(function(){ $('#addr'+i).html("<td>"+ (i+1) +"</td>"+ "<td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md'/></td>"+ "<td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td>"+ "<th><input name='mobile"+i+"' type='text' placeholder='Mobile' 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--; } }); $("#appendToColumn").click(function(){ $('#addc'+j).html('<th id="mycId'+j+'" style="background-color:yellow">Text here '+j+'</th>'); $('#addc'+j).append('<th id="addc'+(j+1)+'"></th>'); // $('#addc'+j).append('<td id="myId'+j+'" class="col-md-2" >Text here '+j+'</td>'); j++; }); $("#delete_column").click(function(){ if(j>1){ $("#addc"+(j-1)).html(''); j--; } }); }); // ('<tr id="addr'+(i+1)+'"></tr>'); // $(".row").append('<div id="myId'+divNum+'" class="col-xs-6 col-md-4">New Div '+divNum+'</div>'); /* $("#appendToColumn").click(function(){ $('#addc'+j).html('<th id="mycId'+j+'" style="background-color:yellow">Text here '+j+'</th>'); $('#addc'+j).append('<th id="addc'+(j+1)+'"></th>'); // $('#addc'+j).append('<td id="myId'+j+'" class="col-md-2" >Text here '+j+'</td>'); j++; }); $(".blog-post").each(function() { $(this).append("<p>Here's a note</p>"); }); */

Related: See More

Rubik Presentation Page
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Bootstrap Tabs with Table

Questions / Comments: