Hi Kiran12,
Refer the below sample.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1] [id*=txtQuantity]").on("change", function () {
var total = 0;
$($("[id*=GridView1] [id*=txtQuantity]")).each(function () {
if (!isNaN(parseInt($(this).val()))) {
total += parseInt($(this).val());
}
});
$("[id*=GridView1] [id*=lblTotal]").html(total);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
<tr>
<th scope="col">
Item
</th>
<th scope="col">
Quantity
</th>
</tr>
<tr>
<td>
Shirt
</td>
<td>
<input name="GridView1$ctl02$txtQuantity" type="text" id="GridView1_txtQuantity_0" />
</td>
</tr>
<tr>
<td>
Football
</td>
<td>
<input name="GridView1$ctl03$txtQuantity" type="text" id="GridView1_txtQuantity_1" />
</td>
</tr>
<tr>
<td>
Bat
</td>
<td>
<input name="GridView1$ctl04$txtQuantity" type="text" id="GridView1_txtQuantity_2" />
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
<span id="GridView1_lblTotal"></span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Demo
You can change the html controls with asp controls.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblTotal" runat="server"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Item", typeof(string)) });
dt.Rows.Add(1, "Shirt");
dt.Rows.Add(2, "Football");
dt.Rows.Add(3, "Bat");
GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.FooterRow.Cells[0].Text = "Total";
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Id", GetType(Integer)), New DataColumn("Item", GetType(String))})
dt.Rows.Add(1, "Shirt")
dt.Rows.Add(2, "Football")
dt.Rows.Add(3, "Bat")
GridView1.DataSource = dt
GridView1.DataBind()
GridView1.FooterRow.Cells(0).Text = "Total"
End If
End Sub