Bootstrap Snippet Dynamic Table with ID's 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
<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">
      <div class="col-lg-12">
          <h1>Table Records</h1>
          <table class="table table-bordered table-hover" id="tableAddRow">
              <thead>
                  <tr>
                      <th>User Name</th>
                      <th>Email</th>
                      <th>Password</th>
                      <th style="width:10px"><span class="glyphicon glyphicon-plus addBtn" id="addBtn_0"></span></th>
                  </tr>
              </thead>
              <tbody>
                  <tr id="tr_0">
                      <td><input type="text" id="userName" class="form-control"/></td>
                      <td><input type="text" id="email" class="form-control" /></td>
                      <td><input type="text" id="password" class="form-control" /></td>
                      <td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove_0"></span></td>
                  </tr>
              </tbody>
          </table>
      </div>
    </div>
</div>
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
$(document).ready(function () {
    $('.addBtn').on('click', function () {
        //var trID;
        //trID = $(this).closest('tr'); // table row ID 
        addTableRow();
    });
     $('.addBtnRemove').click(function () {
        $(this).closest('tr').remove();  
    })
    var i = 1;
    function addTableRow()
    {
        var tempTr = $('<tr><td><input type="text" id="userName_' + i + '" class="form-control"/></td><td><input type="text" id="email_' + i + '" class="form-control" /></td><td><input type="text" id="password_' + i + '" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtn_' + i + '"></span></td></tr>').on('click', function () {
           $(this).closest('tr').remove(); 
           $(document.body).on('click', '.TreatmentHistoryRemove', function (e) {
                $(this).closest('tr').remove();  
            });
        });
        $("#tableAddRow").append(tempTr)
        i++;
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dynamic Table with ID's"
Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Dynamic Table with ID's" Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Dynamic Table with ID's"
Bootstrap 3.3.0 Snippet by Nasir