> ## Content Index
> Fetch the complete content index at: https://blog.aunlead.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Adding rows dynamically to a table using jQuery - Part 2
- URL: https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-2/
- Published: 2010-01-24T01:12:00.000Z
- Updated: 2021-01-20T11:34:57.000Z
- Description: Continuation of series where we discuss Jquery APIs and the template for dynamic rows
- Author: Rajat Nair
- Tags: Javascript, Jquery, #Import 2026-09-22 19:54

In this post we shall cover how to add a new row to a table. This post would be a continuation of [Part I](https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-1/).

To dynamically add a row to a table, I would be using the append functionality of jQuery. We can use either the

CLONE method ([https://api.jquery.com/clone/](https://api.jquery.com/clone/?ref=blog.aunlead.com))

> Create a copy of the set of matched elements.

or APPEND method ([https://api.jquery.com/append/](https://api.jquery.com/append/?ref=blog.aunlead.com))

> Insert content, specified by the parameter, to the end of each element in the set of matched elements.

I prefer the append method because we got more control on the generation of the element ids/names. In the clone method, the element ids are also copied & by default the events associated are not copied (Using `withDataAndEvents` parameter we can change this default behaviour).

The HTML which will be appended to the table body –

```javascript
var newItem = $("
<tr> 
 <td> 
  <input type='text' class='classTextbox' jsonsyntax='EmpName' 
  id='txtEmpName" + index + "' name='txtEmpName" + index + "'/> 
 </td>
 <td>
  <input type='text' jsonsyntax='City' class='classTextbox' 
  id='txtCity" + index + "' name='txtCity" + index + "' /> 
 </td>
 <td>
  <input type='text' class='classTextbox' jsonsyntax='Dept' 
  id='txtDept" + index + "' name='txtDept" + index + "' /> 
 </td>
 <td>
  <input type='text' jsonsyntax='Age' class='classTextbox' 
  id='txtAge" + index + "' name='txtAge" + index + "' /> 
 </td>
 <td>
  <img id='btnPlus" + index + "' src='../Images/add.png' class='classImage' 
  title='" + $strAdd + "' onclick='AddClicked();'/> 
  <img class='classImage' id='btnMinus" + index + "' title='" + $strDelete + "' 
  src='../Images/delete.png' onClick='RemoveRow(this);'/>
 </td>
</tr>");

```

All the new rows added to the table would contain unique ids/names. The dynamically added controls have an index appended to them.

In the next post I shall explain the functionality of `AddClicked()` and `RemoveRow()` funtions. Also I shall explain how the `jsonsyntax` tag would help us in retrieving multiple control/element data for pre-processing; before its sent to the server.