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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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--;
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


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