<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<META charset="utf-8" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
</HEAD>
<BODY>
<table id="shutaGrid">
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
<select>
<option value="1" selected="selected">
1
</option>
<option value="2">
2
</option>
</select>
</td>
<td>
<input type="text" />
</td>
<td>
<span>dsfdf</span>
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input value="dfdf" readonly="readonly" type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input value="df11" style="display: none;" type="text" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var tabTableInput = function(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_");
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();
});
});
rowInputs.push( {
"length" : thisRowInputs.length,
"rowindex" : inputRowIndex,
"data" : rowArray
});
inputRowIndex++;
});
}
new tabTableInput("shutaGrid", "text");
</script>
</div>
<div id="MySignature"></div>
</BODY>
</HTML>
分享到：
相关推荐
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
运用jquery技术来实现table元素的tr内容的上下移动,从而改变用户调整的顺序.研究的源代码实例共享给大家,希望能够帮助到你.
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
NULL 博文链接：https://busing.iteye.com/blog/684127
jQuery实现鼠标划过文字左右移动 请点击演示地址看效果。
jquery操作表格增加删除
使用 JQuery 操作表格，很简单的代码，有详细的注释。
jQuery鼠标指针光标移动特效是一款蓝色圆圈波纹跟随鼠标移动动画特效。
jQuery实现列表上下移动置顶+带入数据库文件 适合初学者 文件简单整洁，步骤少。重要的地方有注释，文件是php页面的，但是适用于任何界面
NULL 博文链接：https://kingschan.iteye.com/blog/1513128
jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列，中间内容可以横向拖动，固定表头，可以横向拖动的表格插件代码。
jquery特效双色表格 jquery特效双色表格
jquery可编辑表格代码实现
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
jQuery实现鼠标划过时文字左右移动 代码应该有用
jQuery仿Excel表格列表排序代码，支持输入框检索表格数据内容和筛选表格字段，可按数字大小、字母顺序进行升降序排列。
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。
jQuery穿梭框列表按钮控制左右移动代码，点击控制按钮，左右列表内容可互相转移。
jquery 动态创建表格，单元背景随机色
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果