"Dynamic Table row creation and Deletion"
Bootstrap 3.0.3 Snippet by MadhanKarthik

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 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"> Name </th> <th class="text-center"> Mail </th> <th class="text-center"> Mobile </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> <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>
$(document).ready(function(){ var i=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><td><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--; } }); });

Related: See More

Gaia Bootstrap Template
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Bootstrap Tabs with Table

Questions / Comments:

hello, please i want to add column ! someone can help me ?

Bouzidi ezzedine () - 7 years ago - Reply 0

anyone tell me how to insert data into database using php

zohaib () - 8 years ago - Reply 0

Hello, can you please also tell me how will I submit this data to the database?

sahshaurya () - 8 years ago - Reply 0

for some reason this is not working for me. I only get to see the head of the table, buttons not working

Nitu Vlad () - 9 years ago - Reply 0

Can you please help me, when I add row, the 3rd time I press, the row that was supposed to append after, it appears to the 1st row.

Ryan () - 9 years ago - Reply 0

Very Nice

Peter McManaman () - 9 years ago - Reply 0

Couple more options.

$('#table tr:last').after('<tr><td>column 1 value</td><td>column 2 value</td></tr>');

$('#table > tbody:last').append('<tr><td>column 1 value</td><td>column 2 value</td></tr>');

$('#myTable > tbody:first').append('<tr><td>column 1 value</td><td>column 2 value</td></tr>');
$('#myTable > tbody:last').append('<tr><td>column 1 value</td><td>column 2 value</td></tr>');

Read more: http://www.ssiddique.info/d...

Shabina Siddique () - 9 years ago - Reply 0

pls send a code for how to generate rows automatically, when we are entering data continuously..

Ashok () - 9 years ago - Reply 0

This code is not usable , when come forward to dynamic option selection .

YOONG SIN JIE () - 10 years ago - Reply 0

Hi

I'm trying to add ng-Autocomplete on the new input but somehow it does not work.. do you have any idea what it can be?
http://plnkr.co/edit/il2J8q...
//K

K () - 10 years ago - Reply 0

is it posible to make this sortable?

jlndk () - 10 years ago - Reply 0