Adding rows dynamically to a table using jQuery - Part 3

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 and Part II

We will create a row object (refer Part II) with the required elements and append it to the tabData table’s tbody section (refer to Part I)

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.

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.

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.