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 tutorials of Dynamically Add/edit and Delete Using jQuery,

• Add/Delete Record Dynamically With Jquery
• How To Add Dynamic Rows with Jquery

Jquery provides a clone() method which is used to create a clone of that entity.
In this post, we will create a button and after click of that button we will add 5 rows to the target table body.

How To Add Row Dynamically in Table using jQuery

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

<div style="float: right; padding-right: 10px; padding-bottom: 10px;"><a class="btn add-records" role="button" data-added="0"><i class="icon-plus-sign"></i>&nbsp;Add Five Rows</a></div>

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

<form enctype="multipart/form-data">
 <div class="divBgWhite" align="center">
  <div style="float:right; padding-right:10px; padding-bottom:10px;">
   <a role="button" class="btn add-records" data-added="0"><i class="icon-plus-sign"></i>&nbsp;Add Five Rows</a>
  </div>
  <table width="100%" class="table table-bordered table-hover record-table" id="tbl_addedit">
   <thead>
    <tr>
     <th width="8%">#</th>
     <th width="100px">Number</th>
    </tr>
   </thead>
   <tbody id="EditPreCon">
    <tr class="item-pre-con">
     <td><span class="sn"><?php echo $i+1; ?></span>.</td>
     <td>test</td>
     <td>Phpflow.com</td>
    </tr>
    <tr id="empty-tr">
     <td colspan="4"><div align="center"><strong>No record found!</strong></div></td>
    </tr>
   </tbody>
  </table>           
 </div>
</form>
<div style="display:none;">
 <table id="AddPreCon">
  <tbody>
   <tr class="item-pre-con">
    <td><span class="sn"></span>.</td>
    <td>test</td>
    <td>phpflow.com</td>
   </tr>
  </tbody>
 </table>
</div>

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: