开发者

How to detect a key event in a <tr>

I have a list in this format:

<tr class=开发者_如何学C'hoverTr trBuscaFornecedor'>
    <td width='100px'>Information 0</td>
    <td>Information 1</td>
    <td><input type='radio' class='hidden_apoioSelect'/></td>
</tr>

And the 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");
        }
    });
});

So, this will give to user a chance to use their keyboard to select an item in a list of database results.

As you can see, I was forced to put a radio to make the focus follow the lines, so my question is:

How can I do this without the radio, using only the <tr>?

p.s. I will accept any tips to improve my code.

Thanks!


Is this what you're after?

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

Or in even less could you could do this, which I think is the same thing that you want!

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜