`

光标自动从一个表格跳入另一个表格

JavaScripthtml 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">

document.onkeyup=fun;

function fun(){
var now=document.activeElement;
if(now.value.length==2){
next(now.id);
}
}
//跳转到下一个输入框
function next(nowId){
var nums = new Array("a","b","c","d","e");
if(nowId.substring(1,2)=="7"){
var nowRow=0;
for(var i=0;i<nums.length;i++){
if(nums[i]==nowId.substring(0,1)){
nowRow=i;
break;
}
}
document.getElementById(nums[nowRow+1]+"1").focus();
}else{
var nextId=nowId.substring(0,1)+""+(parseInt(nowId.substring(1,2))+1);
document.getElementById(nextId).focus();
}
}
</script>

<body>
<form>
<table width="100%" border="0" cellpadding="3" cellspacing="1" class="bg_xt">
   <tr>
       <td colspan="7" align="center" bgcolor="#FFE1F9" class="font_01">红 号</td>
       <td align="center" bgcolor="#E1F0FF" class="font_02">蓝号</td>
   </tr>
    <tr>
       <td align="center" bgcolor="#FFE1F9" class="font_02">A</td>
       <td align="center" bgcolor="#FFE1F9"><input  type="text" name="a1" id="a1" maxlength="2" class="bk_frm3"/></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a2" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a3" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a4" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a5" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a6" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#E1F0FF"><input type="text" name="a1" id="a7" maxlength="2" class="bk_frm3" /></td>
    </tr>
    <tr>
       <td align="center" bgcolor="#FFE1F9" class="font_02">B</td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b1" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b2" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b3" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b4" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b5" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b6" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#E1F0FF"><input type="text" name="b1" id="b7" maxlength="2" class="bk_frm3" /></td>
    </tr>
    <tr>
       <td align="center" bgcolor="#FFE1F9" class="font_02">C</td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c1" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c2" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c3" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c4" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c5" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c6" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#E1F0FF"><input type="text" name="c1" id="c7" maxlength="2" class="bk_frm3" /></td>
    </tr>
    <tr>
       <td align="center" bgcolor="#FFE1F9" class="font_02">D</td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d1" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d2" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d3" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d4" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d5" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d6" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#E1F0FF"><input type="text" name="d1" id="d7" maxlength="2" class="bk_frm3" /></td>
    </tr>
    <tr>
       <td align="center" bgcolor="#FFE1F9" class="font_02">E</td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e1" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e2" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e3" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e4" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e5" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e6" maxlength="2" class="bk_frm3" /></td>
       <td align="center" bgcolor="#E1F0FF"><input type="text" name="e1" id="e7" maxlength="2" class="bk_frm3" /></td>
    </tr>
</table>
   </form>
</body>
</html>
分享到：
| js最大化窗口代码很简单实用喔
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics