1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <table id="keybord">
9 <tr>
10 <td><input /></td>
11 <td><input /></td>
12 <td><input /></td>
13 <td><input /></td>
14 </tr>
15 <tr>
16 <td><input /></td>
17 <td><input /></td>
18 <td><input /></td>
19 <td><input /></td>
20 </tr>
21 <tr>
22 <td><input /></td>
23 <td><input /></td>
24 <td><input /></td>
25 <td><input /></td>
26 </tr>
27 </table>
28 <script type='text/javascript' src='jquery.js'></script>
29 <script type="text/javascript">
30 $(function(){
31 var baseIndex=100;
32 $('#keybord').find('tr').each(function(r){
33 $(this).find('td').each(function(c){
34 $(this).find('input').attr('tabindex',r*100+c+baseIndex).addClass('tbInput');
35 });
36 });
37 $('#keybord .tbInput').live('keydown',function(evt){
38 var tabIndex=parseInt($(this).attr('tabindex'));
39 switch(evt.which){
40 case 38://up
41 tabIndex-=100;
42 break;
43 case 40://down
44 tabIndex+=100;
45 break;
46 case 37://left
47 tabIndex--;
48 break;
49 case 39://right
50 tabIndex++;
51 break;
52 default:
53 return;
54 }
55 if(tabIndex>0){
56 $('#keybord .tbInput[tabindex]='+tabIndex+'}').focus();
57 return false;
58 }
59 return true;
60 });
61 })
62 </script>
63 </body>
64 </html>
