我有表,其中指定的单元格包含输入。输入不在所有单元格中(!)。
如何使用左右键在此表中导航键盘?
示例 - 如果我在值为5的单元格中按“左”,则需要将焦点放在值为4的单元格上,然后按下值为3的单元格,等等。
<table class='mytable'>
<tr>
<td><input type='text' value='1'></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type='text' value='2'></td>
<td>same text..</td>
<td><input type='text' value='3'></td>
</tr>
<tr>
<td><input type='text' value='4'></td>
<td><input type='text' value='5'></td>
<td>same text..</td>
</tr>
</table>
我知道如何检测按键(例如keycode
)。只有使用正确的选择器才能导航到表格中的上一个单元格(不在行中 - 需要在所有表格中导航,但只在带有输入的单元格中)。
答案 0 :(得分:0)
这样的事情怎么样? http://jsfiddle.net/7jQCe/3/
HTML示例:
<table>
<tr>
<td><input type="text" data-value="1" class="btnClick" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="text" data-value="2" class="btnClick" /></td>
<td>same text..</td>
<td><input type="text" data-value="3" class="btnClick" /></td>
</tr>
<tr>
<td><input type="text" data-value="4" class="btnClick"></td>
<td><input type="text" data-value="5" class="btnClick"></td>
<td>same text..</td>
</tr>
</table>
JS with jQuery:
$(".btnClick").keydown(function(e) {
if(e.keyCode == 37) { // left
var currentField = $(this).data("value");
var currentTD = $(this).parent();
var prevField = currentField - 1;
var prevTD = $('*[data-value="'+prevField+'"]').parent();
//Do something with the TD
$('*[data-value="'+prevField+'"]').focus();
}
else if(e.keyCode == 39) { // right
var currentField = $(this).data("value");
var currentTD = $(this).parent();
var nextField = currentField + 1;
var prevTD = $('*[data-value="'+nextField+'"]').parent();
//Do something with the TD
$('*[data-value="'+nextField+'"]').focus();
}
});
答案 1 :(得分:0)
这是最好的解决方案
$('table.arrow-nav').keydown(function(e){
var $table = $(this);
var $active = $('input:focus,select:focus',$table);
var $next = null;
var focusableQuery = 'input:visible,select:visible,textarea:visible';
var position = parseInt( $active.closest('td').index()) + 1;
console.log('position :',position);
switch(e.keyCode){
case 37: // <Left>
$next = $active.parent('td').prev().find(focusableQuery);
break;
case 38: // <Up>
$next = $active
.closest('tr')
.prev()
.find('td:nth-child(' + position + ')')
.find(focusableQuery)
;
break;
case 39: // <Right>
$next = $active.closest('td').next().find(focusableQuery);
break;
case 40: // <Down>
$next = $active
.closest('tr')
.next()
.find('td:nth-child(' + position + ')')
.find(focusableQuery)
;
break;
}
if($next && $next.length)
{
$next.focus();
}
有关更多详细信息,请参见此 它是从这里拿来的