Add new row in GridView above footer on Button Click using jQuery in ASP.Net

Hi siddharth,

I have created a sample which fullfill your requirement

HTML

<div>
    <asp:GridView ID="gvData" AutoGenerateColumns="false" ShowFooter="true" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="lblID" Text='<%#Eval("ID") %>' runat="server" />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txtID" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="ProductName">
                <ItemTemplate>
                    <asp:Label ID="lblProductName" Text='<%#Eval("ProductName") %>' runat="server" />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txtProductName" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Price">
                <ItemTemplate>
                    <asp:Label ID="lblPrice" Text='<%#Eval("Price") %>' runat="server" />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txtPrice" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:Label ID="lblQuantity" Text='<%#Eval("Quantity") %>' runat="server" />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txtQuantity" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <FooterTemplate>
                    <asp:Button ID="btnSubmit" Text="Add" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<div>
    <script type="text/javascript">
        $(function () {
            $('[id*=btnSubmit]').on('click', function () {
                var gridview = $('[id*=gvData]');
                row = $("[id*=gvData] tr:last-child ").prev().clone(true);
                var txtID = $('[id*=gvData] [id*=txtID]').val();
                var txtProductName = $('[id*=gvData] [id*=txtProductName]').val();
                var txtPrice = $('[id*=gvData] [id*=txtPrice]').val();
                var txtQuantity = $('[id*=gvData] [id*=txtQuantity]').val();
                $("td:nth-child(1)", row).html(txtID);
                $("td:nth-child(2)", row).html(txtProductName);
                $("td:nth-child(3)", row).html(txtPrice);
                $("td:nth-child(4)", row).html(txtQuantity);
                $("[id*=gvData] tbody tr:last").before(row);
                $('[id*=gvData] [id*=txtID]').val('');
                $('[id*=gvData] [id*=txtProductName]').val('');
                $('[id*=gvData] [id*=txtPrice]').val('');
                $('[id*=gvData] [id*=txtQuantity]').val('');
                return false;
            });
        });      
</script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("ID"), new DataColumn("ProductName"), new DataColumn("Price"), new DataColumn("Quantity") });
        dt.Rows.Add(1, "FootBall", 500, 10);
        dt.Rows.Add(2, "T-Shirt", 400, 0);
        dt.Rows.Add(3, "Jeans", 1200, 25);
        dt.Rows.Add(4, "Shirt", 650, 15);
        dt.Rows.Add(5, "VolleyBall", 700, 0);
        dt.Rows.Add(6, "X-Box", 25000, 36);
        dt.Rows.Add(7, "PlayStation 4", 50000, 20);
        dt.Rows.Add(8, "Oven", 12000, 30);
        dt.Rows.Add(9, "Cricket-Bat", 3200, 0);
        dt.Rows.Add(10, "Cricket-Ball", 530, 15);
        gvData.DataSource = dt;
        gvData.DataBind();
    }
}

ScreenShot

Hope this works for you