JS实现表格使用上下左右键在input移动

最新推荐文章于 2024-01-29 08:48:32 发布

置顶 weixin_38769163

最新推荐文章于 2024-01-29 08:48:32 发布

阅读量1.2k

点赞数

<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript">
    // tabTableInput("tb1","text");
function tabTableInput(tableId, inputType) {
var rowInputs = [];
var trs = $("#" + tableId).find("tr");
var inputRowIndex = 0;
$.each(trs, function (i, obj) {
if ($(obj).find("th").length > 0) { //跳过表头
return true;
}
var rowArray = [];
var thisRowInputs;
if (!inputType) { //所有的input
thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])");
} else {
thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])[type=" + inputType + "]");
}
if (thisRowInputs.length == 0)
return true;

thisRowInputs.each(function (j) {
$(this).attr("_r_", inputRowIndex).attr("_c_", j);
rowArray.push({ "c": j, "input": this });

$(this).keydown(function (evt) {
var r = $(this).attr("_r_");
var c = $(this).attr("_c_");

if (evt.which < 37 || evt.which > 40) {
return;
}

var tRow
if (evt.which == 38) { //上
if (r == 0)
return;

r--; //向上一行

tRow = rowInputs[r];
if (c > tRow.length - 1) {
c = tRow.length - 1;
}
} else if (evt.which == 40) { //下
if (r == rowInputs.length - 1) { //已经是最后一行
return;
}

r++;
tRow = rowInputs[r];
if (c > tRow.length - 1) {
c = tRow.length - 1;
}
} else if (evt.which == 37) { //左
if (r == 0 && c == 0) { //第一行第一个,则不执行操作
return;
}
if (c == 0) { //某行的第一个,则要跳到上一行的最后一个,此处保证了r大于0
r--;
tRow = rowInputs[r];
c = tRow.length - 1;
} else { //否则只需向左走一个
c--;
}
} else if (evt.which == 39) { //右
tRow = rowInputs[r];
if (r == rowInputs.length - 1 && c == tRow.length - 1) { //最后一个不执行操作
return;
}

if (c == tRow.length - 1) { //当前行的最后一个,跳入下一行的第一个
r++;
c = 0;
} else {
c++;
}
}

$(rowInputs[r].data[c].input).focus().select();
});
});

rowInputs.push({ "length": thisRowInputs.length, "rowindex": inputRowIndex, "data": rowArray });

inputRowIndex++;
});
}
</script>
</head>
<body>
   <table id="tb1" border="1" cellpadding="3">
   <tr>
       <th>移动</th>
       <th>数据</th>
       <th>数据</th>
   </tr>
   <tr>
       <td><input type='text' name='aa' id='aa' value=''></td>
       <td><input type='text' name='aa1' id='aa1' value=''></td>
       <td><input type='text' name=aa2 id='aa2' value=''></td>
   </tr>
   <tr>
       <td><input type='text' name='bb' id='bb' value=''></td>
       <td><input type='text' name='bb1' id='bb1' value=''></td>
       <td><input type='text' name='bb2' id='bb2' value=''></td>
   </tr>
   <tr>
       <td><input type='text' name='cc' id='cc' value=''></td>
       <td><input type='text' name='cc1' id='cc1' value=''></td>
       <td><input type='text' name='cc2' id='cc2' value=''></td>
   </tr>
</table>
</body>
</html>