Saturday, March 29, 2014

How to add(append) row to Table using Jquery in ASP.Net

2 comments
Jquery can be used to append row to an existing table without postback. In this example I will show the jquery code just to add a new row to table . To save data to database without post back in asp.net first look this article: Save Data without page refresh in asp.net.

Jquery append() function used to append row to a table.

HTML Code to Insert Row to Table without Postback Using Jquery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Append row to Table using Jquery</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
   
<script type="text/javascript">
$(document).ready(function () {
$('#InsertRow').click(function () {
$('#table').append('<tr><td>' + $('#txtName').val() + '</td><td>' + $('#txtEmail').val() + '</td><td>' + $('#txtAddress').val() + '</td><td>' + $('#txtCountry').val() + '</td></tr>');
            });

        });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>Name:</b><asp:TextBox ID="txtName" runat="server" />
<b>Email:</b><asp:TextBox ID="txtEmail" runat="server" />
<b>Address:</b><asp:TextBox ID="txtAddress" runat="server" />
<b>Country:</b><asp:TextBox ID="txtCountry" runat="server" />

<input type="button" id="InsertRow" name="name" value="Submit" />
</div>
<div>&nbsp;</div>
<table border="0" cellpadding="0" id="table" cellspacing="0">
<tr>
<th>
     Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </th>
 <th>
     Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </th>
 <th>
     Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </th>
 <th>
     Country
 </th>
</tr>
</table>
</form>
</body>
</html>

 Output Snapshot:
append row to table using jquery

2 comments: