Hi KiranGowda,
Refer the below code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtPrice]").val("0");
$("[id*=txtQuantity]").val("0");
});
$(".calculate").live("keyup", function () {
var row = $(this).closest('tr');
var price = $(row).find('[id*=txtPrice]');
var quantity = $(row).find('[id*=txtQuantity]');
if (!jQuery.trim($(price).val()) == '' && !jQuery.trim($(quantity).val()) == '') {
if (!isNaN(parseFloat($(price).val())) && !isNaN(parseFloat($(quantity).val()))) {
$("[id*=lblTotal]", row).html(parseFloat($(price).val()) * parseFloat($(quantity).val()));
}
} else {
$(price).val('');
$(quantity).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Total</th>
</tr>
<tr>
<td>Shirt</td>
<td><input name="GridView1$ctl02$txtPrice" type="text" id="GridView1_txtPrice_0" class="calculate" /></td>
<td><input name="GridView1$ctl02$txtQuantity" type="text" id="GridView1_txtQuantity_0"
class="calculate" /></td>
<td><span id="GridView1_lblTotal_0">0</span></td>
</tr>
<tr>
<td>Football</td>
<td><input name="GridView1$ctl03$txtPrice" type="text" id="GridView1_txtPrice_1" class="calculate" /></td>
<td><input name="GridView1$ctl03$txtQuantity" type="text" id="GridView1_txtQuantity_1"
class="calculate" /></td>
<td><span id="GridView1_lblTotal_1">0</span></td>
</tr>
<tr>
<td>Bat</td>
<td><input name="GridView1$ctl04$txtPrice" type="text" id="GridView1_txtPrice_2" class="calculate" /></td>
<td><input name="GridView1$ctl04$txtQuantity" type="text" id="GridView1_txtQuantity_2"
class="calculate" /></td>
<td><span id="GridView1_lblTotal_2">0</span></td>
</tr>
</table>
</div>
Grand Total: <span id="lblGrandTotal">0</span>
</form>
</body>
</html>
Demo
GridView
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:TextBox ID="txtPrice" class="calculate" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" class="calculate" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
