Bootstrap Snippet Input to Table Row (Add and Remove) 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="//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">
        <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <label>Name</label>
        </div>
        <div class="col-lg-4">
            <div class="form-group">
                <input id="name" type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <label>Address</label>
        </div>
        <div class="col-lg-4">
            <div class="form-group">
                <input id="addr" type="text" class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-lg-offset-2">
            <button id="addBtn" class="addBtn form-control btn btn-primary">
                Add to Row
            </button>
        </div>
    </div>
    <br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#example table
{
    counter-reset: rowNumber;
}
#example table tr > td:first-child
{
    counter-increment: rowNumber;
}
                
#example table tr td:first-child::before
{
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
        var i = 1;
        
        $(".addBtn").click(function(){
            var name = $("#name").val();
            var addr = $("#addr").val();
            var markup = "<tr><td>"+i+"</td><td>" + name + "</td><td>" + addr + "</td><td><button class='btn btn-small delBtn'>Hapus</button></td></tr>";
            $("table tbody").append(markup);
            i++;
        });
        
        $(function () {
            $("table").on("click", ".delBtn", function () {
                $(this).closest('tr').remove();
            });
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Input to Table Row (Add and Remove)"
Bootstrap 3.3.0 Snippet by kai1313

Related: See More

Questions / Comments:

"Input to Table Row (Add and Remove)" Bootstrap 3.3.0 Snippet by kai1313

Related: See More

Questions / Comments:

"Input to Table Row (Add and Remove)"
Bootstrap 3.3.0 Snippet by kai1313