Refer this
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript">
$("[id*=txtQuantity]").live("keyup", function () {
if (!isNaN($(this).val())) {
var row = $(this).closest("tr");
$(".total", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
}
var grandTotal = 0;
$(".total").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("#GrandTotal").html(grandTotal);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass = "price"/>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Total" HeaderText="Total" ItemStyle-CssClass = "total"/>
</Columns>
</asp:GridView>
Grand Total: <span id = "GrandTotal"></span>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Item"), new DataColumn("Price"), new DataColumn("Total") });
dt.Rows.Add("Shirt", 200, 0);
dt.Rows.Add("Football", 30, 0);
dt.Rows.Add("Bat", 22.5, 0);
GridView1.DataSource = dt;
GridView1.DataBind();
}
