今天拿到一个需求，需要实现在table中上下左右获取文本框，如exl
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; font-size:20px;} td{width:200px;height:25px;} .tdNone{border:none;width:100px; } input{width:200px;height:25px;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ //alert("window!"); var id; var jqID; $("input").keydown(function(event){ id=$(this).attr("id"); jqID=id.split(""); if(event.which || event.keyCode){ if((event.which==37)||(event.keyCode == 37)){//左键37 //alert(id+"---"+jqID[0]+"---"+jqID[1]); $("#"+jqID[0]+(jqID[1]-1)).focus();//左边的input获取焦点 //alert("#"+jqID[0]+(jqID[1]-1)); } if((event.which==38)||(event.keyCode == 38)){//上键38 //alert(id+"---"+jqID[0]+"---"+jqID[1]); $("#"+(jqID[0]-1)+jqID[1]).focus();//上边的input获取焦点 //alert("#"+jqID[0]+(jqID[1]-1)); } if((event.which==39)||(event.keyCode == 39)){//右键39 //alert(id+"---"+jqID[0]+"---"+(jqID[1]+1)); $("#"+jqID[0]+(Number(jqID[1])+1)).focus();//上边的input获取焦点 //alert("#"+jqID[0]+(jqID[1]-1)); } if((event.which==40)||(event.keyCode == 40)){//下键40 //alert(id+"---"+(jqID[0]+1)+"---"+jqID[1]); $("#"+(Number(jqID[0])+1)+jqID[1]).focus();//上边的input获取焦点 //alert("#"+jqID[0]+(jqID[1]-1)); } } }); }) </script> </head> <body> <table border="1" cellpadding="5" cellspacing="50"> <tr> <td class="tdNone"></td> <td>名称1</td> <td>名称2</td> <td>名称3</td> <td>名称4</td> </tr> <tr> <td class="tdNone">模特1</td> <td><input id="11"/></td> <td><input id="12" /></td> <td><input id="13"/></td> <td><input id="14"/></td> </tr> <tr> <td class="tdNone">模特2</td> <td><input id="21"/></td> <td><input id="22"/></td> <td><input id="23"/></td> <td><input id="24"/></td> </tr> <tr> <td class="tdNone">模特2</td> <td><input id="31"/></td> <td><input id="32"/></td> <td><input id="33"/></td> <td><input id="34"/></td> </tr> <tr> <td class="tdNone">模特2</td> <td><input id="41"/></td> <td><input id="42"/></td> <td><input id="43"/></td> <td><input id="44"/></td> </tr> </table> </body>
