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

我有一个大概是这样设置的

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行描述字段

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

往下看：

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

上升：

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

也就是说，假设您的

输入

名称相同

否则，您必须稍微更改该选择器，或者在

td

上使用jQuery的

.index（）

，然后使用

.eq（）

进行选择

工作

$(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();
        }
    }); 
});

---

我将提供一个我自己最近的代码示例，它几乎做了同样的事情。希望它会有一些价值

// 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

---

依我看，你应该在keydown上触发代码，而不是keydup。这将继续触发向上/向下操作（如果按下了它们的键）。同样，考虑左/右箭头（37和39）以及上/下箭头的测试——我可能期望左向上与上箭头相同，右键与下一个箭头相同。检查单选按钮？二者都两者都没有？@mblase：我希望左/右箭头键在输入中移动光标，而不是在它们之间。（当然，在极端情况下，我认为可以在输入之间移动。）在单行输入中，向上/向下是无用的，因此重写它们不是问题，因为它不会改变正常行为。如何在keydown事件中使用这些语句？@Vincent-

$（…）.on（'keydown'，函数（e）{if（e.keyCode==38）{/*Up*/}else if（e.keyCode==40）{/*down*/}）

如果名称是这样一个数组（非常常见），您可以修改这个流行的答案吗：

name=“Transactions[0][date\u of交易]”

。第二行是

name=“Transactions[1][date u of交易]”

…等等