Bootstrap Snippet Adding dropdown rows using HTML CSS Bootstrap jQuery

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.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 ---------->
<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">
                            Salesforce
                        </th>
                        <th class="text-center">
                            EasyVista
                        </th>
                        <th class="text-center">
                            Delete
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td class='text-center'>
                            <select class="selectpicker" style="width:300px">
                              <option>--Select--</option>        
                              <option>Incident Number</option>
                              <option>Description</option>
                              <option>Origin</option>
                            </select>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
.delete-row{
    cursor: pointer;
    text-align: center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td>"+ (i+1) +"</td><td class='text-center'><select name='name"+i+" class='selectpicker' style='width:300px'><option>--Select--</option><option>Incident Number</option><option>Description</option><option>Origin</option></select></td><td class='text-center'><select name='mail"+i+" class='selectpicker' style='width:300px'><option>--Select--</option><option>Incident Number</option><option>Description</option><option>Origin</option></select></td><td class='text-center'><span class='delete-row'>X</span></td>");
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++; 
    });
    
    $("#delete_row").click(function(){
        if(i>1){
        $("#addr"+(i-1)).html('');
            i--;
        }
    });
     
    $(".table").on("click",".delete-row", function(){
        $(this).parents("tr").remove();
    })
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Adding dropdown rows"
Bootstrap 3.0.0 Snippet by Shatanik13

Related: See More

Questions / Comments:

"Adding dropdown rows" Bootstrap 3.0.0 Snippet by Shatanik13

Related: See More

Questions / Comments:

"Adding dropdown rows"
Bootstrap 3.0.0 Snippet by Shatanik13