"Creating Dynamic Row and Using Select tags"
Bootstrap 3.3.0 Snippet by ganeshneelekani

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="//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 ---------->
<div class="container">
<div class="row clearfix">
<tr>
<td>
<input type="text" name='tablename' placeholder='TABLE NAME' class="form-control"/>
</td>
<br/>
<td>
<input type="text" name='jira' placeholder='JIRA Description' class="form-control"/>
</td>
<br/>
<br/>
</tr>
<div class="col-md-12 column"></div>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
</thead>
<thead>
<tr>
<th class="text-center">
FIELD
</th>
<th class="text-center">
TYPE
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("</td><td><input name='name"+i+"' type='text' placeholder='FIELD' class='form-control input-md'/> </td><td> <select name='TYPE' ><option value='VARCHAR(200)'>VARCHAR(200)</option><option value='INTEGER'>INTEGER</option><option value='BOOLEAN'>BOOLEAN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
$killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
$(this).remove();
$('select').on('change', function() {
alert( this.value );})
});
});
i++;
});
$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
$killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
$(this).remove();
});});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: