Adding Rows To The Table Dynamically Using JQuery

In This Scenario,An HTML Page Has One Text Box,One Button And One Table.Here,Suppose I Want To Add Rows To The Table Dynamically On Clicking The “Ok” Button On My Form.
Here Is My Simplest Html Form

//Starting Of HTML Form
<html>
<title>HTML FORM</title>
<head>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.19.custom.min.js">  </script>  
<script type="text/javascript">   
//Entry Point Of Jquery
$(document).ready(function () {
//Entry Point After Clicking OK Button
$("#idbtnOk").click(function(){
//Creating New Row To The Table
$('#idOfTable tbody>tr:last').clone(true).insertAfter('#idTable tbody>tr:last');
//Adding Data To The Newly Created Row
$('#idOfTable tbody>tr:last #idlblOfFirstControl').text("Your Data");
                             });
});
</head>
<body>
<input id="txt" type="text" />
<br/>
<input id="idbtnOk" ClientIDMode="Static"
 type="button" value="Ok" />
<br/>
<table id="idOfTable" ClientIDMode="Static"
 style="width:854px;"cellspacing="0"cellpadding="0" border="1" >
  <tr align="left" style="height:30px">
     <th><b> Control </b></th>                 
  </tr>
  <tr align="left">
    <td><label id="idlblOfFirstControl"></label></td>
  </tr>
</table>
</body>
</html>
//End Of HTML Form

So,We Need To Write Function(Will Fire On Clicking ‘Ok’ Button) In Jquery So That Every Time Clicking ‘Ok’ Button Will Fire The Function And Add Piece Of Code Inside Function To Add New Row To The Table.
First Define The Function In Jquery Where You Want To Add Code For This Purpose. I Want To Add Rows Upon Clicking Ok Button(id=”idbtnOk”).Then Defined Function Is:

$(document).ready(function () {  //Entry Point Of Jquery Code
//Here Is Our Function For Clicking 'Ok' Button
//Clicking 'Ok' Button Will Execute This Function Each Time 'Ok' Button Will Be Clicked
$("#idbtnOk").click(function(){--Code To Perform--}); 
});

Now We Need To Add Code To Perform.So,First We Need To Get The Unique-Id Of That Table On Which We Want To Perform.Now You Get The Unique-Id Of That Table

Now You Get The Unique-Id(id=”idOfTable“) Of That Table And Add This Line To Create New Row In That Table:
$(‘#idOfTable tbody>tr:last’).clone(true).insertAfter(‘#MainContent_idTable tbody>tr:last’);
Row Has Been Added In The Table(Last Row).Now What Next??
You Want To Fill The Data In Newly Added Row??
So,First You Need To Go To The Last Newly Added Row And Then Get The Id Of Cell(Of Newly Added Row) You Want:

(Here Id Of Cell Is:”idlblOfFirstControl”)

$(‘#idOfTable tbody>tr:last #idlblOfFirstControl‘);

Now Fill The Data In That Cell You Want:
$(‘#MainContent_idtblOfQuestionFormat tbody>tr:last #idlblOfFirstControl’).text(“Your Data”);
Now Function Ends After Filling The Data In Newly Added Row.
NOTE:Now You Get The Unique-Id Of That Table But Be Sure That Id Must Be Equal To The Runtime Id Of That Table.
Because,Runtime Id Of Table May Be Different From The Actual Id Of That Table. If Your Table Inside The “asp:Content ContentPlaceHolderID=”MainContent”And Actual Id Is “idTable“(Supposed).Then Runtime ID Of That Table Is “MainContent_idTable”.
To Get The Runtime Id Attach A Breakpoint Anywhere Inside Jquery Part And Then Go To The Parsed Code Of Table In That Page OR, Simply Set [ClientItMode=”Static”] As Done Above.

Anish Thakur , JavaScript Programmer, Mindfire Solutions.

Related Tags: jQuery

Author : Anish Thakur

Adding Rows To The Table Dynamically Using JQuery

Leave a Reply

Subscribe With Us