<html>
<head runat="server">
<title>Real Time Calculate Total In GridView In ASP.NET using Jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function calculate(val) {
let Quantity = $("#" + val.id).val();
let price = $(val).closest('tr').find('[id*=lblprice]').text();
$(val).closest('tr').find('[id*=lbltotal]').text(Quantity * price);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="col-md-12">
<div class="col-md-6">
<asp:GridView ID="gvProducts" AutoGenerateColumns="false" CssClass="table table-bordered" runat="server">
<Columns>
<asp:TemplateField HeaderText="ProductName">
<ItemTemplate>
<asp:Label ID="lblProduct" Text='<%#Eval("ProductName")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Product Price">
<ItemTemplate>
<asp:Label ID="lblprice" Text='<%#Eval("ProductPrice")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" onkeyup="calculate(this)" Text="0" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lbltotal" Text="0" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>