How to acces iterateloop through TextBox in Repeater and calculate Total using JavaScript in ASP.Net

This Way:

HTML:

<form id="form1" runat="server">
    <asp:Repeater ID="Repeater1" runat="server">
        <HeaderTemplate>
            <table id="GridView1" border="0" cellpadding="5" cellspacing="0">
                <tr>
                    <th>
                        Item
                    </th>
                    <th>
                        Price
                    </th>
                    <th>
                        Quantity
                    </th>
                    <th>
                        Total
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%#Eval("Item")%>
                </td>
                <td class="price">
                    <%#Eval("Price")%>
                </td>
                <td>
                    <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <tr>
                <td colspan="3" align="right">
                    Total:
                </td>
                <td>
                    <asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
                </td>
            </tr>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    </form>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
        dt.Rows.Add("Shirt", 200);
        dt.Rows.Add("Football", 30);
        dt.Rows.Add("Bat", 22.5);       
        Repeater1.DataSource = dt;
        Repeater1.DataBind();
    }

CSS:

<style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>

Script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=txtQuantity]").val("0");
        });
        $("[id*=txtQuantity]").live("change", function () {

            if (isNaN(parseInt($(this).val()))) {
                $(this).val('0');
            } else {
                $(this).val(parseInt($(this).val()).toString());
            }
        });
        $("[id*=txtQuantity]").live("keyup", function () {

            if (!jQuery.trim($(this).val()) == '') {
                if (!isNaN(parseFloat($(this).val()))) {
                    var row = $(this).closest("tr");
                    $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
                }
            } else {
                $(this).val('');
            }
            var grandTotal = 0;
            $("[id*=lblTotal]").each(function () {
                grandTotal = grandTotal + parseFloat($(this).html());
            });
            $("[id*=lblGrandTotal]").html(grandTotal.toString());
        });
    </script>

Image:

Thank You.