Bootstrap Snippet Dynamic Table row creation and Deletion using HTML 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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
                            Name
                        </th>
                        <th class="text-center">
                            Mail
                        </th>
                        <th class="text-center">
                            Notes
                        </th>
                        <th class="text-center">
                            Device
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0' data-id="0">
                        <td data-name="name" data-type="input">
                            <input type="text" name='name0'  placeholder='Name' class="form-control"/>
                        </td>
                        <td data-name="mail" data-type="input">
                            <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
                        </td>
                        <td data-name="desc" data-type="textarea">
                            <textarea name="desc0" placeholder="Description" class="form-control"></textarea>
                        </td>
                        <td data-name="sel" data-type="select">
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
33
34
35
36
37
$(document).ready(function() {
    $("#add_row").on("click", function() {
        //$.each($("#addr0 td"), function() {
        //   console.log($(this).data("name"), $(this).data("type"));
        //});
         
        //console.log($("#tab_logic tr"));
        //console.log($("#tab_logic tr:nth(" + ($("#tab_logic tr").length-1) + ")"));
        //console.log("Last ID: ", $("#tab_logic tr:nth(" + ($("#tab_logic tr").length-1) + ")").data("id"));
        
        var newid = parseInt($("#tab_logic tr:nth(" + ($("#tab_logic tr").length-1) + ")").data("id"))+1;
        
        var tr = $("<tr></tr>", {
            id: "addr"+($('#tab_logic tr').length-1),
            "data-id": newid
        });
         
        $.each($("#addr0 td"), function() {
            var cur_td = $(this);
            
            if ($(this).data("name") != undefined && $(this).data("type") != undefined) {
                var td = $("<td></td>");
                var c = $(cur_td).find($(cur_td).data("type")).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {
                var td = $("<td></td>", {
                    'text': $('#tab_logic tr').length
                }).appendTo($(tr));
            }
        });
         
        //console.log($(tr));
         
        $(tr).appendTo($('#tab_logic'));
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic Table row creation and Deletion"
Bootstrap 3.1.0 Snippet by fractorr

Related: See More

Questions / Comments:

"Dynamic Table row creation and Deletion" Bootstrap 3.1.0 Snippet by fractorr

Related: See More

Questions / Comments:

"Dynamic Table row creation and Deletion"
Bootstrap 3.1.0 Snippet by fractorr