"Custom dynamic HTML table with add row functionality"
Bootstrap 3.3.0 Snippet by AkshayGulhane

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script> var globalCount = 2; </script> <div class="container"> <div class="row"> <div class="col-md-12"> <input type="button" id="btnId" class="btn btn-primary" value="Add a row"> <table id="tableId" class="table table-hover" cellspacing="0" width="100%"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><i class="fa fa-plus" aria-hidden="true" onclick="addNewSubRow(event)" id="addSubBtn"></i></td> </tr> </tbody> </table> </div> </div> </div> <script> $('#btnId').on("click", function(){ $('#tableId').append('<tr><td>' + globalCount +'</td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><i class="fa fa-plus" aria-hidden="true" onclick="addNewSubRow(event)" id="addSubBtn' + globalCount +'"></i></td></tr>'); globalCount++; }) </script> <script type="text/javascript"> function addNewSubRow(event){ var targetId = event.target.id; var idd = '#' + targetId; $(idd).parent().parent().parent().append('<tr><td></td><td></td><td></td><td><input type="text"></td></tr>'); } </script> </body> </html>

Questions / Comments: