How to add Row Index to GridView (HTML Table) using jQuery

Please refer this code to generate the RowIndex using jQuery.

HTML

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField HeaderText="RowIndex" ItemStyle-CssClass="RowIndex" ItemStyle-Width="30" />
        <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" ItemStyle-CssClass="Country" HeaderText="Country"
            ItemStyle-Width="150" />
        <asp:TemplateField>
            <ItemTemplate>
                <a href="#" class="editRow">Select</a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

jQuery

$(function () {
    DisplayRowIndex();
});

function DisplayRowIndex() {
    $("[id*=GridView1] tr:has(td)").each(function () {
        $(this).find(".RowIndex").html($(this).index());
    });
}

You can call this event in start of jQuery event, when deleting the rows. so that you can generate the index once again.

Namespace

using System.Data;

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                new DataColumn("Name", typeof(string)),
                new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Screenshot