带有输入的 td 中的 Jquery 表导航
Jquery table navigation in td with input
我有表格,其中指定的单元格包含输入。输入不在所有单元格中(!
如何使用左右键在此表中导航键盘?
示例 - 如果我在值为 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
)。问题仅在正确选择器中导航到表中的上一个单元格(不在行中 - 需要在所有表中导航,但仅在带有输入的单元格中导航)。
这样的事情怎么样?http://jsfiddle.net/7jQCe/3/
网页示例:
<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>
带有jQuery的JS:
$(".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();
}
});
这是
最好的解决方案
$('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();
}
有关更多详细信息,请参阅此处它取自这里
https://gist.github.com/krcourville/7309218
相关文章:
- jQuery导航下拉菜单未显示..任何想法
- jquery导航显示和隐藏多个页面
- jQuery导航菜单没有't更新第一个元素
- 高效的jQuery导航栏
- JQuery 导航栏防止默认不起作用
- 使用 html() 的 Jquery 导航
- Jquery 导航菜单
- 有问题的jQuery导航栏弹出窗口
- 如何在使用javascript或Jquery导航到其他页面时替换路径
- AngularJS指令:将jQuery导航滚动变成指令
- JQuery导航警告以输入类型为条件
- jQuery导航合并导航
- 使用JQuery导航到下拉菜单上有选择的页面
- jquery导航到子选项卡
- React-Router使用jQuery导航路由
- 404 jQuery导航错误
- jQuery导航切换
- jQuery导航菜单问题
- jQuery导航幻灯片
- 在滑块上放置jquery导航按钮