Использование клавиш вверх / вниз для перемещения между текстовыми полями в таблице

Question

У меня есть

Answer 1

Чтобы спуститься:

$(this).closest('tr').next().find('input[name=' + $(this).attr('name') + ']').focus();

Чтобы подняться:

$(this).closest('tr').prev().find('input[name=' + $(this).attr('name') + ']').focus();

То есть, если все ваши input названы одинаково.

В противном случае вам придется немного изменить этот селектор или использовать jQuery .index() на td, а затем выбрать с помощью .eq().

Answer 2

Попробуйте это

Рабочая демо

$(function(){
    $('input[id^="name_"], input[id^="description_"], input[id^="notes_"]')
    .bind('keyup', function(e) {
        var $this = $(this);
        var $tr = $this.closest("tr");
        var id = this.id.substring(0, this.id.indexOf("_"));

        if(e.keyCode == 38){
            $tr.prev().find('input[id^='+id+']').focus();
        }
        else if(e.keyCode == 40)
        {
           $tr.next().find("input[id^='"+id+"']").focus();
        }
    }); 
});

Answer 3

Я приведу пример моего собственного недавнего кода, который сделал почти то же самое. Надеюсь, это будет иметь какую-то ценность.

// select events from the table using the keyboard arrows
$(document).keydown(function(e) {
    if (e.keyCode==39 || e.keyCode==40) { // right, down
    // if no radio buttons are checked, select the first one
    if (!$("input:radio[name='rownum']:checked").length)
        $("input:radio[name='rownum']:first").attr("checked",true);
    // otherwise, select the next one
    else
        $("input:radio[name='rownum']:checked").closest("tr").next().find("input").attr("checked",true);
    // highlight the row, un-highlight its siblings, and check its radio button
    $("input:radio[name='rownum']:checked").closest("tr")
        .addClass('selected')
        .siblings().removeClass('selected').end()
        .find('input').attr('checked','checked');
    } else if (e.keyCode==37 || e.keyCode==38) { // left, up
    // if no radio buttons are checked, select the last one
    if (!$("input:radio[name='rownum']:checked").length)
        $("input:radio[name='rownum']:last").attr("checked",true);
    // otherwise, select the previous one
    else 
        $("input:radio[name='rownum']:checked").closest("tr").prev().find("input").attr("checked",true);
    // highlight the row, un-highlight its siblings, and check its radio button
    $("input:radio[name='rownum']:checked").closest("tr")
        .addClass('selected')
        .siblings().removeClass('selected').end()
        .find('input').attr('checked','checked');
    }
}); // end keydown