Question

我有一个＆lt; table＆gt;大致像这样设置

Name            Description     Notes
===========================================
[___________]   [_________]     [_________]

有很多行而不是用户标记行，我想按下向上/向下键在所选列中上下移动。

行的ID为'row_ {ID}'，其中ID是数据库ID。这些字段的ID为“name_ {ID}”，“description_ {ID}”，“notes_ {ID}”等。

我正在用jQuery抓住媒体，如：

$('input[id^="name_"]').bind('keyup', function(e) {

    if(e.keyCode == 38)
        ...
    else if(e.keyCode == 40)
        ...
});

基本上我想要的是，如果用户在描述的第2行并按下，则他们会移动到第1行描述字段，如果他们按下则会移到第3行描述字段。

我无法找到选择下一行或上一行的方法。有人可以提供帮助吗？

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名称都相同。

否则，您必须稍微更改该选择器，或者使用.index()上的jQuery td，然后选择.eq()。

Answer 2

试试这个

正在使用 demo

$(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

使用向上/向下键在表格中的文本字段之间移动

3 个答案: