主体方法函数:
var inputs = $("#@(Perfix)tbData tbody").find("input[type='text']");//获取表格内所有的输入框元素
//方向键上下左右移动方法事件 add by xsun 2016-07-01
function keyDown(event) {
//debugger;
var focus = document.activeElement;//获取当前焦点的元素
if (!document.getElementById("@(Perfix)tbData").contains(focus)) return;//如果获取到的元素不包含在id='@(Perfix)tbData'表格内则直接返回
var event = window.event || event;
var key = event.keyCode;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] === focus) break;//通过以上获得的当前焦点来获取表格输入框的位置
}
switch (key) {
case 37://左
if (i > 0) {
inputs[i - 1].focus();//1:表示按方向键左时向左移动一个位置
inputs[i - 1].click();
}
break;
case 38://上
if (i - 3 >= 0) {
inputs[i - 3].focus();//3:表示你一行中有几个输入框,按向上键时定位到当前焦点的上一行的同一位置
inputs[i - 3].click();
}
break;
case 39://右
if (i < inputs.length - 1) {
inputs[i + 1].focus();//1:表示按方向键右时向右移动一个位置
inputs[i + 1].click();
}
break;
case 40://下
if (i + 3 < inputs.length) {
inputs[i + 3].focus();
inputs[i + 3].click();
}
break;
}
}
主体表格样式及调用方法:
<table id="@(Perfix)tbData" class="table table-striped table-bordered table-hover" οnkeydοwn="keyDown(event);" cellspacing="0"></table>
整体结构如下图: