in this jQuery tutorial, We’ll let you know How to dynamically adding and removing rows in a table using jQuery. Earlier, we managed this capability with javascript, but with jQuery, you can do so with just a few lines of code.
We occasionally need to add and remove rows in a table on the fly, therefore I’m looking for a technique to produce sample rows and dynamically add them to the table body. jQuery can quickly construct a row and add it to a table, or delete it from a table.
You can also read my previous tutorials Alternate Table Rows Color using jQuery .
Also Checkout other useful jQuery tutorials,
- Simple Example of Pagination Using jQuery and Bootstrap
- Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
- Simple Example of Hide, Show and Toggle Element Using jQuery
- Dynamically Add and Remove rows in a Table Using jquery
Video Tutorial
If you are more comfortable in watching a video that explains Dynamically Add and Removes rows From an HTML Table Using jQuery, then you should watch this video tutorial.
I will provide you with simple jQuery code which will generate a row and add into the table and on click of the remove button that row can remove from the table.
The simple steps to dynamically add and delete rows from table are as follows,
Dynamically Add/Remove rows in a HTML table using jQuery
Step 1: We will create a new index.html file and include jQuery and Bootstrap library files into head section of index.html file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Step 2: We will add an HTML table into index.html file which will contains all records in grid layout.We will append newly dynamically generated row with in body of this table.
Here, I have passed table id id="tbl_posts" and table body id id="tbl_posts_body" to identify table and table content rows.I have added a remove button on each row and added record ID on the custom attribute (data-id) to delete a specific row.
Step 3: Created a sample row and content which will append to the table.
<div style="display: none;"> <table id="sample_table"> <tbody> <tr id=""> <td>.</td> <td>ABC Posts</td> <td>04</td> <td>21 to 42 years</td> <td>5200-20200/-</td> <td> </td> </tr> </tbody> </table> </div>
Step 4: We will created a button which will add an row with in table, when user will click this button.
<div class="well clearfix"><a class="btn btn-primary pull-right add-record" data-added="0"><i class="glyphicon glyphicon-plus"></i> Add Row</a></div>
Step 5: Create an event on the button(Step 3) and add functionality to create a clone of the row(Step 2), finally, append cloned row into the target table tbody.
jQuery(document).delegate('a.add-record', 'click', function(e) {
e.preventDefault();
var content = jQuery('#sample_table tr'),
size = jQuery('#tbl_posts >tbody >tr').length + 1,
element = null,
element = content.clone();
element.attr('id', 'rec-'+size);
element.find('.delete-record').attr('data-id', size);
element.appendTo('#tbl_posts_body');
element.find('.sn').html(size);
});
We have created a clone of row (Step 2) and inserted the row serial number, at the end of jQuery code – We have appended with #tbl_posts_body.
Step 6: Let’s create a delete event that will fire when the user clicked on the remove icon on the table row.
jQuery(document).delegate('a.delete-record', 'click', function(e) {
e.preventDefault();
var didConfirm = confirm("Are you sure You want to delete");
if (didConfirm == true) {
var id = jQuery(this).attr('data-id');
var targetDiv = jQuery(this).attr('targetDiv');
jQuery('#rec-' + id).remove();
//regnerate index number on table
$('#tbl_posts_body tr').each(function(index) {
//alert(index);
$(this).find('span.sn').html(index+1);
});
return true;
} else {
return false;
}
});
Here, I am finding row id then removing that row from the table and regenerating the index of each row.
You can download source code and Demo from below link.
THANKS