Question

我有这种格式的列表：

<tr class='hoverTr trBuscaFornecedor'>
    <td width='100px'>Information 0</td>
    <td>Information 1</td>
    <td><input type='radio' class='hidden_apoioSelect'/></td>
</tr>

和js：

$(".hidden_apoioSelect").live("focusin", function(){
    $(this).keydown(function(e) {
        if((e.keyCode == 13 || e.keyCode == 40)){ 
            $(this).closest("tr").next().find('input').focus(); 
            $(this).closest("tr").removeClass("activeTr");
            $(this).closest("tr").next().addClass("activeTr");

        }else if(e.keyCode == 38){ 
            $(this).closest("tr").prev().find('input').focus(); 
            $(this).closest("tr").removeClass("activeTr");
            $(this).closest("tr").prev().addClass("activeTr");
        }
    });
});

因此，这将使用户有机会使用他们的键盘来选择数据库结果列表中的项目。

正如您所看到的，我被迫放置radio以使focus跟随这些行，所以我的问题是：

如何在不使用radio的情况下执行此操作，仅使用<tr>？

P.S。我会接受任何改进我的代码的提示。

谢谢！

Answer 1

这就是你要追求的吗？

 $("tr").live("keydown", function(e){

    if ((e.keyCode == 13 || e.keyCode == 40)) {
        $(this).closest("tr").next().find('input').focus();
        $(this).closest("tr").removeClass("activeTr");
        $(this).closest("tr").next().addClass("activeTr");

    } else if (e.keyCode == 38) {
        $(this).closest("tr").prev().find('input').focus();
        $(this).closest("tr").removeClass("activeTr");
        $(this).closest("tr").prev().addClass("activeTr");
    }
});

jsFiddle Demo

或者甚至更少，你可以做到这一点，我认为这是你想要的一样！

 $("tr").live("keydown", function(e){
    if ((e.keyCode == 13 || e.keyCode == 40 || e.keyCode == 38)) {
        $(this).closest("table").find('tr').not(this).removeClass("activeTr");
        $(this).addClass("activeTr");
    } 
});

jsFiddle Demo #2

如何检测一个关键事件

1 个答案: