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
精彩评论