> ## 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 3
- URL: https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-3/
- Published: 2010-02-01T10:59:00.000Z
- Updated: 2021-01-20T11:35:27.000Z
- Description: Continuation of the series where we will cover dynamically adding/removing rows to a table
- Author: Rajat Nair
- Tags: Jquery, Javascript, #Import 2026-09-22 19:54

In this post, I shall summarize the following –  
• Adding a row function using an index  
• `AddClicked()` method  
• `RemoveRow()` method

This post is a continuation of [Part I](https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-1/) and [Part II](https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-2/)

We will create a row object (refer [Part II](https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-2/)) with the required elements and append it to the `tabData` table’s tbody section (refer to [Part I](https://blog.aunlead.com/adding-rows-dynamically-to-a-table-using-jquery-part-1/))

```javascript
function addFormField(index) {

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>");

    $("#tabData > tbody").append(newItem);
}

```

##### AddClicked() method

This method would add a new row to the table.

```javascript
function AddClicked() {
    $count = $count + 1; // To control row delete
    $IndexCount = $IndexCount + 1; // To control row ids
    addFormField($IndexCount);
}

```

##### RemoveRow() method

This method can be used to delete user created rows.

```javascript
function RemoveRow(paramRow) {
    if ($count > 0) {
        $count = $count - 1;
        $(paramRow.parentNode.parentNode).remove();
    }
}

```

I hope this series helped you in getting started with adding dynamically generated rows to tables. In the next post, I shall demo how we can add additional functionality like autocomplete to these dynamically created controls.