我有这种格式的列表:
<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。我会接受任何改进我的代码的提示。
谢谢!
答案 0 :(得分: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");
}
});
或者甚至更少,你可以做到这一点,我认为这是你想要的一样!
$("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");
}
});