Calculate GridView Row Total and display in TextBox using jQuery in ASP.Net

The below code is working fine. Instead of label in total column i would like to have textbox. Where i need to change the code?

Instead of this <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label> i would like to have Textbox control.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".calculate").keyup(function () {
                Calculate();
            });
            function Calculate() {
                var grandTotal = 0;
                $('[id*=testgrid] tr').each(function () {
                    var row = $(this);
                    var qty = $('[id*=txtCalcQuantity]', row).val();
                    var price = $('[id*=txtCalcUnitprice]', row).val();
                    var total;
                    var perc;
                    if (qty != '' && !isNaN(qty) && price != '' && !isNaN(price)) {
                        total = parseFloat(qty) * parseFloat(price);
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);
                    } else if (qty == '' || price == '') {
                        total = 0;
                        grandTotal += total;
                        $("[id*=lblGrandTotal]").html(grandTotal);
                    }
                    $('[id*=lblTotal]', row).html(total);
                })
                SetPercentage(grandTotal);
            }
            function SetPercentage(grandTotal) {
                $('[id*=lblTotal]').each(function () {
                    var total = $(this).html();
                    var row = $(this).closest('tr');
                    if (total != '' && total != 0) {
                        var percent = (parseFloat(total) / grandTotal).toFixed(2);
                        $('[id*=lblPercentage]', row).html(percent);
                    }
                });
            }
        });
    </script>
    <asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" ShowFooter="true">
        <Columns>
            <asp:BoundField DataField="RowNum" />
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server" class="calculate"></asp:TextBox>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblGrandTotal" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Unit Price">
                <ItemTemplate>
                    <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"
                        class="calculate"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Percentage">
                <ItemTemplate>
                    <asp:Label ID="lblPercentage" runat="server"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("RowNum");
        dt.Rows.Add("1");
        dt.Rows.Add("2");
        dt.Rows.Add("3");
        testgrid.DataSource = dt;
        testgrid.DataBind();
    }
}