<!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>
分享到：
相关推荐
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
总之，通过利用jQuery提供的强大DOM操作功能，我们可以轻松地实现表格元素的上下移动，提高用户体验，使得网页交互更加灵活和直观。这个实例不仅展示了jQuery的基础用法，也体现了其在解决实际问题中的价值。希望这...
本文将深入探讨如何使用jQuery来实现表格行（tr）的添加、删除和上下移动，同时提供相关源码供参考。 一、jQuery基本操作 在开始之前，我们需要确保已引入jQuery库。通常在HTML文件头部通过`<script>`标签引入...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
本文将深入探讨如何使用jQuery操作表格，基于给出的资源，我们可以看到一个与表格相关的示例。 首先，"tb-bg.gif"可能是一个表格背景图像，用于美化表格的视觉效果。在网页设计中，背景图片可以提升表格的整体风格...
本教程将深入讲解如何利用 jQuery 来操作表格，以实现更高效、更简洁的代码。 首先，理解 HTML 表格的基础结构至关重要。表格由 `<table>` 标签定义，`<tr>` 代表表格行，`<th>` 用于表头，而 `<td>` 用于单元格...
在本项目中，"jQuery实现列表上下移动置顶+带入数据库文件" 是一个适合初学者的教程，它教你如何使用jQuery库来实现一个功能，允许用户在列表中上下移动条目并将其置顶，同时将这些操作同步到数据库中。这个教程包含...
本篇文章通过一个简单的实例，展示了如何使用JavaScript实现表格行上下移动的操作，涉及到了对页面元素节点及属性的操作技巧。 首先，我们来看一个简单的表格示例，它包含了几个表格行（`<tr>`）和单元格（`<td>`）...
本文将深入探讨如何使用jQuery实现列表的左右上下排序，这是一项常见的前端开发任务，尤其对于动态交互的网页应用来说至关重要。 首先，我们要理解jQuery的核心理念：它提供了一套易于使用的API，使得JavaScript的...
这个"jQuery实现鼠标划过文字左右移动"的项目，是利用jQuery库来创建一个动态的用户交互效果，当鼠标悬停在文本上时，文字会沿着水平方向左右移动，为网页增加视觉吸引力。 首先，我们需要理解jQuery的基本结构。一...
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能，以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API，使得JavaScript代码更易于编写和理解。其核心概念包括选择器（用于选取DOM元素）...
本篇文章将深入探讨jQuery在表格操作方面的应用实例，这对于前端开发人员来说是极其重要的技能。 首先，我们需要理解jQuery是如何选择和操作HTML元素的。使用jQuery的选择器，如`$("#tableId")`，可以轻松地选取...
如果`jquery-rlutil-1.6.2.js`是一个自定义插件，它可能扩展了jQuery的功能，比如提供更方便的表格操作接口。学习和理解这个插件的工作原理可以帮助我们更好地实现类似的功能。 综上所述，这个示例涉及到的核心...
总之，"鼠标左右拖动，键盘左右移动，点击箭头左右移动内容"是提高网页交互性和用户体验的重要手段，涉及到的技术包括JavaScript事件处理、DOM操作以及可能的前端库或框架的使用。通过这些技术，我们可以创建出更加...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
《jQuery仿梦幻西游鼠标指针光标移动特效解析与应用》 在Web开发中，提升用户体验往往体现在细节上，而鼠标指针的动态效果就是其中之一。本篇将深入探讨如何利用jQuery实现“仿梦幻西游鼠标指针光标移动特效”，并...
本文将详细讲解如何使用jQuery来操作表格，实现增删功能。 一、表格的基本结构 HTML表格由`<table>`标签定义，其中包含`<tr>`（行）标签，`<th>`（表头）和`<td>`（数据单元格）标签。例如： ```html 姓名 ...
为了解决这一问题，"jQuery表格顶部与左右两侧固定滚动代码"应运而生。这款插件允许表格的顶部表头和左侧列始终保持可见，即使在用户滚动页面时也是如此，从而提供了更好的用户体验。 jQuery是一个广泛使用的...
在这个“Jquery实现数据左右移动Demo”中，我们将深入探讨如何利用jQuery来实现动态的数据展示，特别是在一个可能需要数据左右移动的场景，如轮播图或卡片式布局。 首先，我们需要理解jQuery的基本用法。jQuery通过...
本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能，这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**：首先，理解jQuery的基础是至关重要的。...