<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 ----------> <br/> <div class="container"> <div class="row"> <div class="col-lg-8"> <table class="table table-bordered table-hover" id="tableAddRow"> <tbody> <tr id="tr_0"> <td> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Продукт <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Мука</a></li> <li><a href="#">Сахар</a></li> <li><a href="#">Масло</a></li> <li><a href="#">Яйцо</a></li> <li><a href="#">Молоко</a></li> <li><a href="#">Сливки</a></li> <li role="separator" class="divider"></li> <li><a href="#">Новый</a></li> </ul> </div> </td> <td> <div class="input-group"> <input type="text" class="form-control" aria-label="Объём"> <span class="input-group-addon">г.</span> </div> </td> <td> <span class="glyphicon glyphicon-arrow-right btn btn-info sameBtn" id="sameBtn_0"></span> </td> <td> <div class="input-group"> <input type="text" class="form-control" aria-label="Объём"> <span class="input-group-addon">г.</span> </div> </td> <td> <span class="glyphicon glyphicon-lock btn btn-warning lockBtn" id="lockBtn_0"></span>   <span class="glyphicon glyphicon-remove btn btn-danger addBtnRemove" id="addBtnRemove_0"></span> </td> </tr> <tr></tr> </tbody> </table> </div> </div> <span class="glyphicon glyphicon-plus btn btn-success addBtn" id="addBtn_0"></span> </div>

$(document).ready(function () { var i = 1; var newLine = "<tr id=\"tr_"+ i + "\"> \ <td> \ <div class=\"btn-group\"> \ <button type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"> \ Продукт <span class=\"caret\"></span> \ </button> \ <ul class=\"dropdown-menu\"> \ <li><a href=\"#\">Мука</a></li> \ <li><a href=\"#\">Сахар</a></li> \ <li><a href=\"#\">Масло</a></li> \ <li><a href=\"#\">Яйцо</a></li> \ <li><a href=\"#\">Молоко</a></li> \ <li><a href=\"#\">Сливки</a></li> \ <li role=\"separator\" class=\"divider\"></li> \ <li><a href=\"#\">Новый</a></li> \ </ul> \ </div> \ </td> \ \ <td> \ <div class=\"input-group\"> \ <input type=\"text\" class=\"form-control\" aria-label=\"Объём\"> \ <span class=\"input-group-addon\">г.</span> \ </div> \ </td> \ \ <td> \ <span class=\"glyphicon glyphicon-arrow-right btn btn-info sameBtn\" id=\"sameBtn_" + i + "\"></span> \ </td> \ \ <td> \ <div class=\"input-group\"> \ <input type=\"text\" class=\"form-control\" aria-label=\"Объём\"> \ <span class=\"input-group-addon\">г.</span> \ </div> \ </td> \ \ <td> \ <span class=\"glyphicon glyphicon-lock btn btn-warning lockBtn\" id=\"lockBtn_" + i + "\"></span> \   \ <span class=\"glyphicon glyphicon-remove btn btn-danger addBtnRemove\" id=\"addBtnRemove_" + i + "\"></span> \ </td> \ </tr>"; $('.addBtn').on('click', function () { addTableRow(); }); $('.addBtnRemove').click(function () { //$(this).closest('tr').remove(); console.log(this.id); }) 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-remove btn btn-danger 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(newLine) i++; } });