Change ASP.Net GridView row background color on key Up Down arrow using jQuery

Hi Shahzad786,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    .selectedRowNew
    {
        background-color: #b0c4de;
        color: Black;
    }
</style>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="City">
            <ItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Text="Mumbai" />
                    <asp:ListItem Text="Pune" />
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Status">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" Text="True" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Yes/No">
            <ItemTemplate>
                <asp:RadioButton ID="RadioButton1" Text="Yes" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<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*=GridView1] td, [id*=GridView1] input, [id*=GridView1] select").on("click", function () {
            var row = $(this).parent();
            $("[id*=GridView1] tr").each(function () {
                if ($(this)[0] != row[0]) {
                    $("td", this).removeClass("selectedRowNew");
                }
            });
            $("td", row).each(function () {
                if (!$(this).hasClass("selectedRowNew")) {
                    $(this).addClass("selectedRowNew");
                } else {
                    $(this).removeClass("selectedRowNew");
                }
            });
        });
        $("[id*=GridView1] input, [id*=GridView1] select").on("keydown", function (e) {
            var selector = $(this)[0].tagName;
            if (typeof ($(this).attr("type")) != "undefined") {
                selector += '[type=' + $(this).attr("type") + ']';
            }
            var row;
            if (e.keyCode == 40) { // Down Arrow.
                var next = $(this).closest("tr").next().find(selector);
                if (next.length > 0) {
                    next.focus();
                }
                row = $(this).closest('td').parent().next();
            }
            if (e.keyCode == 38) { // Up Arrow.
                var prev = $(this).closest("tr").prev().find(selector);
                if (prev.length > 0) {
                    prev.focus();
                }
                row = $(this).closest('td').parent().prev();
            }
            $("[id*=GridView1] tr").each(function () {
                if ($(this)[0] != row[0]) {
                    $("td", this).removeClass("selectedRowNew");
                }
            });
            $("td", row).each(function () {
                if (!$(this).hasClass("selectedRowNew")) {
                    $(this).addClass("selectedRowNew");
                } else {
                    $(this).removeClass("selectedRowNew");
                }
            });
        });
    });
</script>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[3] { 
                        new System.Data.DataColumn("Id", typeof(int)),
                        new System.Data.DataColumn("Name", typeof(string)),
                        new System.Data.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();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn(2) {New System.Data.DataColumn("Id", GetType(Integer)), New System.Data.DataColumn("Name", GetType(String)), New System.Data.DataColumn("Country", GetType(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()
    End If
End Sub

Screenshot