Jquery 键盘操作表格光标上下左右移动

湖南鸟巢专利孵化

2014-11-18

<!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>

通信运营商