How To Add Dynamic Rows in a Table with jQuery

In this tutorial i will discuss how to create a number of rows dynamically with help of jquery, There are a lot of methods which is used to create dynamic rows but we will use clone() jquery method to replicate rows.

Checkout other tutorial of Dynamically Add/edit and Delete Using jQuery,

The jquery provide clone method which is used to create a clone of that entity.
In This tutorial we will create a button and after click of that button we will add 5 rows into target table body.

How To Add Row Dynamically in Table using jQuery

Step 1: Created a button which will add 5 rows when you clicked.


Step 2: Create target table where the dynamically rows will append.

# Number
. test Phpflow.com
No record found!
. test phpflow.com

Step 3: Create event for button and add functionality to create clone and add rows into tbody.

jQuery(document).delegate('a.add-records', 'click', function(e) {
     e.preventDefault();    
    var content = jQuery('#AddPreCon tr'),
        size = jQuery('#tbl_addedit >tbody >tr').length,
        element = null,		 
    for(var i = 0; i<5; i++){
       element = content.clone();
        element.appendTo('#EditPreCon');
        element.find('.sn').html(++size);
    }
	});

Result

clone-jquery