求助表格按键换格操作

document.onkeydown = function(){
if(event.keyCode == 13){
event.keyCode = 9;
}
}其余的也需要判断一下
有点麻烦

td里面的每个input text 都附上onkeydown 事件。在事件里判断event.keyCode 就像一楼的。
然后获取当前所在的td(知道怎么做吧？var e =event.srcElement ;while(e.tagName!="TR"){e = e.parentNode;}
得到了当前tr之后获取tr.rowIndex 然后加一,再然后tb.rows[tr.rowIndex].cells[0]下一个TD再获取里面的input text
--------------------------------------签名分割线-------------------------------------------------

花时间写了一下
都有注释了，不明白再问<html>
<head>
<script language="javascript">
var $ = function(id){ return document.getElementById(id); }

var rows = 3; //行
var cols = 3; //列

/* 加载页面时生成文本框 */
window.onload = function(){
var html = "";
/* 动态生成rows行 cols列的文本框 */
for(var i = 1; i <= rows; i++){
for(var j = 1; j <= cols; j++){
/* 动态生成ID */
html += "<input type='text' id='" + i + "-" + j + "' onkeydown='move(this)' />  ";
}
html += "<br />"; //换行
}
$("text").innerHTML = html; //显示生成的结果
}

/* 回车和上下左右键切换文本框效果 */
function move(obj){
var id = obj.id; //得到ID
var idRow = id.split("-")[0] - 0; //得到行
var idCol = id.split("-")[1] - 0; //得到列
/* 按键事件 */
switch(event.keyCode){
case 13: //回车
case 39: //右
if(idCol == cols && idRow == rows){ //最后一行一列
alert("无法移动");
}else{
if(idCol != cols){ //列之间移动
idCol += 1;
}else{ //列移动到头，行+1继续移动
idRow += 1;
idCol = 1;
}
}
break;
case 37: //左
if(idRow == 1 && idCol == 1){ //第一行第一列
alert("无法移动");
}else{
if(idCol != 1){ //列之间移动
idCol -= 1;
}else{ //列移动到头，行-1继续移动
idRow -= 1;
idCol = cols;
}
}
break;
case 38: //上
if(idRow == 1){
alert("无法移动");
}else{
idRow -= 1;
}
break;
case 40: //下
if(idRow == rows){
alert("无法移动");
}else{
idRow += 1;
}
break;
}
$(idRow + "-" + idCol).focus(); //移动
}
</script>
</head>
<body>
<div id="text">
</div>
</body>
</html>

ie和chrome下测试通过
firefox不行

给你一个支持ie/chrome/firefox/opera版本的
<html>
<head>
<script language="javascript">
var $ = function(id){ return document.getElementById(id); }

var rows = 3; //行
var cols = 3; //列

/* 加载页面时生成文本框 */
window.onload = function(){
var html = "";
/* 动态生成rows行 cols列的文本框 */
for(var i = 1; i <= rows; i++){
for(var j = 1; j <= cols; j++){
/* 动态生成ID */
html += "<input type='text' id='" + i + "-" + j + "' onkeydown='move(this, event)' />  ";
}
html += "<br />"; //换行
}
$("text").innerHTML = html; //显示生成的结果
}

/* 回车和上下左右键切换文本框效果 */
function move(obj, event){
var id = obj.id; //得到ID
var idRow = id.split("-")[0] - 0; //得到行
var idCol = id.split("-")[1] - 0; //得到列
var code = event.keyCode || event.which; //支持firefox
/* 按键事件 */
switch(code){
case 13: //回车
case 39: //右
if(idCol == cols && idRow == rows){ //最后一行一列
alert("无法移动");
}else{
if(idCol != cols){ //列之间移动
idCol += 1;
}else{ //列移动到头，行+1继续移动
idRow += 1;
idCol = 1;
}
}
break;
case 37: //左
if(idRow == 1 && idCol == 1){ //第一行第一列
alert("无法移动");
}else{
if(idCol != 1){ //列之间移动
idCol -= 1;
}else{ //列移动到头，行-1继续移动
idRow -= 1;
idCol = cols;
}
}
break;
case 38: //上
if(idRow == 1){
alert("无法移动");
}else{
idRow -= 1;
}
break;
case 40: //下
if(idRow == rows){
alert("无法移动");
}else{
idRow += 1;
}
break;
}
$(idRow + "-" + idCol).focus(); //移动
}
</script>
</head>
<body>
<div id="text">
</div>
</body>
</html>

感谢楼上回复了一下
我3连无法继续发帖了……完善了一下上和下
final版
代码可以更精简的<html>
<head>
<script language="javascript">
var $ = function(id){ return document.getElementById(id); }

var rows = 3; //行
var cols = 3; //列

/* 加载页面时生成文本框 */
window.onload = function(){
var html = "";
/* 动态生成rows行 cols列的文本框 */
for(var i = 1; i <= rows; i++){
for(var j = 1; j <= cols; j++){
/* 动态生成ID */
html += "<input type='text' id='" + i + "-" + j + "' onkeydown='move(this, event)' />  ";
}
html += "<br />"; //换行
}
$("text").innerHTML = html; //显示生成的结果
}

/* 回车和上下左右键切换文本框效果 */
function move(obj, event){
var id = obj.id; //得到ID
var idRow = id.split("-")[0] - 0; //得到行
var idCol = id.split("-")[1] - 0; //得到列
var code = event.keyCode || event.which; //支持firefox
/* 按键事件 */
switch(code){
case 13: //回车
case 39: //右
if(idCol == cols && idRow == rows){ //最后一行最后一列
alert("无法移动");
}else{
if(idCol != cols){ //列之间移动
idCol += 1;
}else{ //列移动到尾，行+1继续移动
idRow += 1;
idCol = 1;
}
}
break;
case 37: //左
if(idRow == 1 && idCol == 1){ //第一行第一列
alert("无法移动");
}else{
if(idCol != 1){ //列之间移动
idCol -= 1;
}else{ //列移动到头，行-1继续移动
idRow -= 1;
idCol = cols;
}
}
break;
case 38: //上
if(idRow == 1 && idCol == 1){ //第一行第一列
alert("无法移动");
}else{
if(idRow != 1){ //行之间移动
idRow -= 1;
}else{ //行移动到头，列-1继续移动
idRow = rows;
idCol -= 1;
}
}
break;
case 40: //下
if(idRow == rows && idCol == cols){ //最后一行最后一列
alert("无法移动");
}else{
if(idRow != rows){ //行之间移动
idRow += 1;
}else{ //行移动到尾，列+1继续移动
idRow = 1;
idCol += 1;
}
}
break;
}
$(idRow + "-" + idCol).focus(); //移动
}
</script>
</head>
<body>
<div id="text">
</div>
</body>
</html>

<html>
<head>
    <style type="text/css">
        .hover
        {
            background-color: #eef;
        }
    </style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">
        $().ready(function() {
            $("td input").each(function() {
                this.onkeydown = function(event) {
                    event = event || window.event;                    if (event.keyCode === 37) {
                        turnLeft(this);
                    } else if (event.keyCode === 38) {
                        turnUp(this);
                    } else if (event.keyCode === 39) {
                        turnRight(this);
                    } else if (event.keyCode === 40) {
                        turnDown(this);
                    }                }
                this.onfocus = function() {
                    $("td input").removeClass("hover");
                    $(this).addClass("hover");
                }
            });        });        function turnLeft(obj) {
            var num = obj.id.substr(4);
            var nums = num.split("_");
            if (nums[1] - 1 > 0) {
                var rID = "Text" + (nums[0] + "_" + (nums[1] - 1));
                document.getElementById(rID).focus();
                return;
            }
        }
        function turnUp(obj) {
            var num = obj.id.substr(4);
            var nums = num.split("_");
            if (nums[0] - 1 > 0) {
                var rID = "Text" + (nums[0] - 1) + "_" + (nums[1]);
                document.getElementById(rID).focus();
            }
        }
        function turnRight(obj) {
            var num = obj.id.substr(4);
            var nums = num.split("_");
            if (nums[1] - 0 + 1 <= 3) {
                var rID = "Text" + (nums[0] + "_" + (nums[1] - 0 + 1));
                document.getElementById(rID).focus();
            }
        }
        function turnDown(obj) {
            var num = obj.id.substr(4);
            var nums = num.split("_");
            if (nums[0] - 0 + 1 <= 3) {
                var rID = "Text" + (nums[0] - 0 + 1) + "_" + (nums[1]);
                document.getElementById(rID).focus();
            }
        }
    </script></head>
<body>
     <table class="style1">
        <tr>
            <td>
                <input id="Text1_1" type="text" />
            </td>
            <td>
                <input id="Text1_2" type="text" />
            </td>
            <td>
                <input id="Text1_3" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Text2_1" type="text" />
            </td>
            <td>
                <input id="Text2_2" type="text" />
            </td>
            <td>
                <input id="Text2_3" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Text3_1" type="text" />
            </td>
            <td>
                <input id="Text3_2" type="text" />
            </td>
            <td>
                <input id="Text3_3" type="text" />
            </td>
        </tr>
    </table>
    </p>
</body>
</html>

调试易

求助表格按键换格操作

解决方案 »

求助 表格按键换格操作

解决方案 »

求助表格按键换格操作