Add & Remove Table Rows Dynamically

Add & Remove table rows dynamically is very easy using jquery clone and remove function.
Almost all the time we need this feature on our web page while we are creating any big or small application So..
Let me show you how you can add & Remove rows dynamically with very minimal code and responsive table design using bootstrap and jquery.
Just see the below working demo..!!


Copy and Paste below html script to add this feature in your web page.

<link  rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table  class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Full Name</th>
<th>Designation</th>
<th>Mobile No.</th>
<th>Email Id</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="fullname[]" class="form-control"></td>
<td><select name="designation[]" class="form-control">
  <option value="" selected>Select Designation</option>
    <option value="Engineer">Engineer</option>
    <option value="Accountant">Accountant</option>
</select></td>
<td><input type="text" name="mobileno[]" class="form-control"></td>
<td><input type="text" name="emailid[]" class="form-control"></td>
<td><a href='javascript:void(0);'  class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script>
$(function(){
    $('#addMore').on('click', function() {
              var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
              data.find("input").val('');
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
});      
</script>





Thanks 🙂

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.

6 Replies to “Add & Remove Table Rows Dynamically”

  1. Hai, do u know how to save that data into database..??I’m still new in php,so for table dynamically I don’t have idea how to insert that to database.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.