While calculating total of gridview cell using javascript and jquery getting error

I am calculating the total of GridView cells using java script and jquery. But, I am always getting this error while compiling.

The name 'total' does not exist in the current context

Inside GridView code:

<asp:TemplateField HeaderText="Header开发者_如何学Python 1">
    <ItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:Label ID="lblTotal" runat="server" Text="Total" Font-Bold="true">
        </asp:Label>
    </FooterTemplate>            
</asp:TemplateField>
<asp:TemplateField HeaderText="Header 2" >
    <ItemTemplate>
        <asp:TextBox ID="TextBox2" runat="server" class="calculate" 
           onchange="calculate()"></asp:TextBox>
    </ItemTemplate>            
    <FooterTemplate>
        <asp:TextBox ID="total" runat="server"></asp:TextBox>
    </FooterTemplate>  

javascript and jquery code:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" 
  type="text/javascript">
  <script language="javascript" type="text/javascript">
    function calculate()
     {
        var txtTotal = 0.00;
        //var passed = false;
        //var id = 0;

        $(".calculate").each(function (index, value) {
            var val = value.value;
            val = val.replace(",", ".");
            txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(val));
        });
        document.getElementById("<%=total.ClientID %>").value = txtTotal.toFixed(2);
    }

    function MathRound(number) {
        return Math.round(number * 100) / 100;
    }

</script>

how can I solve this issue any help pls.

You can't access controls inside templated controls like GridView that easily. Create some variable to hold total.ClientID so that jQuery can grab it.

In your aspx:

var totalClientID = TotalClientID;

In codebehind:

void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
   if(e.Row.RowType == DataControlRowType.Footer)
   {
       TotalClientID = ((TextBox)e.Row.FindControl("total")).ClientID;
   }
}

<script language="javascript" type="text/javascript">
    function Calculate() {

        var grid = document.getElementById("<%=grid.ClientID%>");
        var sum = 0;
        for (var i = 1; i < grid.rows.length; i++) {
            var Cell = grid.rows[i].getElementsByTagName("input");
            if (!Cell[4].value) {sum += 0; } else { sum += parseFloat(Cell[0].value);}
        }

        alert(sum);        
    }

</script> 



<asp:TemplateField HeaderText="Current payment" >
<ItemTemplate>
    <asp:TextBox ID="txtvalue" runat="server" Width="70px" BorderStyle="None" onkeyup="Calculate();" ></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="120px" />
</asp:TemplateField>`enter code here`