Я пытаюсь использовать функцию навигации клавиатуры вверх и вниз в GridView, используя jQuery. Я написал код для того же,но с ошибкой, что он работает только один раз.

Шаги по воспроизведению ошибки

После копирования моего примера кода в ваши WebForm.aspx и WebForm.aspx.cs соответственно запустите формуНажмите на 2-й записи (например,), чтобы выбрать запись GridViewНажмите клавишу со стрелкой вниз, чтобы выбрать следующую записьНажмите клавишу со стрелкой вниз еще раз, чтобы выбрать следующую запись (но она выиграла 'т здесь работать)

Теперь, если вы нажмете на любую строку еще раз, клавиша со стрелкой вниз будет работать еще раз.

Пожалуйста, укажите, что мне здесь не хватает.

WebForm1.aspx

    
    
        .normalRow
        {
            background-color: White;
            color: Black;
        }
        .selectedRowNew
        {
            background-color: #b0c4de;
            color: Black;
        }
    

    

    
        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('# tr[id]').click(function () {
                $('# tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('# tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            $('# tr[id]').keydown(function (event) {
                if (event.keyCode == "40") {
                    $('# tr[id]').removeClass("selectedRowNew").addClass("normalRow");

                    var row = $(this).closest('tr');
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                    next.focus();
                    next.click();
                }
            });

        });

    


    
    
        
        
    
    

WebForm1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(Int32));
            dt.Columns.Add("Name", typeof(String));

            dt.Rows.Add(new object[] { 1, "John" });
            dt.Rows.Add(new object[] { 2, "James" });
            dt.Rows.Add(new object[] { 3, "Christine" });
            dt.Rows.Add(new object[] { 4, "Michael" });
            dt.Rows.Add(new object[] { 5, "David" });
            dt.Rows.Add(new object[] { 6, "Susan" });

            GridView1.DataSource = dt;
            GridView1.DataBind();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
        {
            if (e.Row.RowType == DataControlRowType.DataRow) 
            {
                e.Row.Attributes.Add("id", "0");
            }
        }

(обновленный код js) - до сих пор не работает, хотя и правильно проходит

        $(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('# tr[id]').click(function () {
                $('# tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('# tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });

            // @freshbm: your code goes here
            $("body").keydown(function (e) {
                if (e.keyCode == 40) //down arrow key code
                    toggleRowSelectionDown();
                if (e.keyCode == 38) // up arrow key code
                    toggleRowSelectionUp();
            }); //this code detect is it up or down arrow

            function toggleRowSelectionDown() {
                var row = $(" .selectedRowNew");
                if (!row.is(":last-child")) { //check for last row in grid
                    $(" tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var next = row.next();
                    next.removeClass("normalRow").addClass("selectedRowNew");
                }
            }

            function toggleRowSelectionUp() {
                var row = $(" .selectedRowNew");
                if (!row.is(":last-child")) { // check for first row in grid
                    $(" tr[id]").removeClass("selectedRowNew").addClass("normalRow");
                    var prev = row.prev();
                    prev.removeClass("normalRow").addClass("selectedRowNew");
                }
            }
        });