<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="keybord">
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
</table>
<script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript">
$(function(){
var baseIndex=100;
$('#keybord').find('tr').each(function(r){
$(this).find('td').each(function(c){
$(this).find('input').attr('tabindex',r*100+c+baseIndex).addClass('tbInput');
});
});
$('#keybord .tbInput').live('keydown',function(evt){
var tabIndex=parseInt($(this).attr('tabindex'));
switch(evt.which){
case 38://up
tabIndex-=100;
break;
case 40://down
tabIndex+=100;
break;
case 37://left
tabIndex--;
break;
case 39://right
tabIndex++;
break;
default:
return;
}
if(tabIndex>0){
$('#keybord .tbInput[tabindex]='+tabIndex+'}').focus();
return false;
}
return true;
});
})
</script>
</body>
</html>
