思路
假设初始坐标为(0,0)
首先要算出表格的最大最小坐标 即(0到maxX,0到maxY)
( maxX = table.rows[0].cells.length ,maxY = tableID.rows.length )
再去监听上下左右的key值
触发事件 就去计算坐标 (不能超过最大最小坐标)
对应这个 tableID.rows[y].cells[x];
html:
<table id='zhizhao_form'>
<tr>
<td>
<input type="text" onkeydown="zhi_move_key(this, event)">
</td>
</tr>
</table>
js
function zhi_move_key(item, event) {
//alert(event.keyCode);
zhimaxX = document.getElementById("zhizhao_form").rows[0].cells.length; //计算表格有列数
zhimaxY = document.getElementById("zhizhao_form").rows.length; //计算表格行数
zhiZaoID=document.getElementById("zhizhao_form"); //获取table
var c = item.parentNode.cellIndex; //获取当前列的下标,因为列中有文本框,取父级
var row = item.parentNode; //获取当前行的下标
while (row.tagName != "TR") row = row.parentNode;
var r = row.rowIndex; var x=r; var y=c;
// alert(document.getElementById('zhizhao_form').rows.item(0).cells.item(1).innerHTML);
// alert(document.getElementById('zhizhao_form').rows[1].cells[1].innerHTML);
if (event.keyCode == 40 || event.keyCode == 13) {
if (r < zhimaxY - 1) {
x = r+1;
y = c ;
}
}
if(event.keyCode == 38){
if (r > 0) {
x = r-1;
y = c ;
}
}
if(event.keyCode == 39){
if (c<zhimaxX-2){
x=r;
y=c+1;
}
}
if(event.keyCode == 37){
if (c>0){
x=r;
y=c-1;
}
}
zhiZaoID.rows[x].cells[y].children[0].focus();
return;
}
表格操作常用方法
(1)captiong :只想<caption />元素(如果存在);
(2)tBodies:<tbody />元素的集合
(3)tFoot:指向<tfoot />元素(如果存在);
(4)tHead:指向<thead />元素(如果存在)
(5)rows:表格中所有行的集合
(6)createTHead():创建<thead/>元素并将其放入表格
(7)createTFoot():创建<tfoot/>元素并将其放入表格
(8)createCaption():创建<caption />元素并将其放入表格
(9)deleteThead():删除<thead />元素
(10)deleteTFoot():删除<tfoot />元素
(11)deleteCaption():删除<caption />元素
(12)deleteRow(position):删除指定位置上的行
(13)insertRow(position):在rows集合中的指定位置上插入一个新行
<tbody />元素添加了以下内容:
(1)rows:<tbody />中所有的行的集合
(2)deleteRow(position):删除指定位置上的行
(3)insertRow(position):在rows集合中的指定位置上插入一个新行
<tr />元算中添加了一下内容:
(1)cells:<tr />元素中所有的单元格的集合
(2)deleteCell(position):删除给定位置上的单元格
(3)insertCell(position):在cells集合的给定位置上插入一个新的单元格
分享到:
相关推荐
学完之后,没有练习,忘得差不多了,最近一个项目中要使用支持粘贴复制的table,选中表格的一部分区域,通过ctrl+v,可以把excel或者其它地方的数据粘贴到html table中,还能支持键盘上下左右键移动选择区域。...
一 键盘操作 1 Insert键增加一行 并复制最后一行内容 Delete键删除最后一行 该操作用以调节表格总大小; 2 Tab键横向移动光标 Enter键纵向移动光标 符合Excle用户习惯; 二 页面操作 1 全选:选择全部行 再次执行...
2.Tab键横向移动光标,Enter键纵向移动光标,符合Excle用户习惯; 二 页面操作 1.全选:选择全部行,再次执行释放全部行; 2.复制所选:复制已经选择的行及其内容; 3.删除所选:删除已经选择的行; 4.清空所选...
实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 ...
15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...
实例311 屏蔽键盘相关事件 494 实例312 屏蔽鼠标右键 496 12.3 登录页面 497 实例313 具有浏览器检测功能的登录页面 497 实例314 防止SQL注入的登录页面 498 实例315 带验证码的登录页面 500 12.4 其他...
15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...
表单行为Excel.View.Sheets 支持多种键盘行为, 例如按下左箭头键使活动单元格向左移动, 按下删除键清除单元格值等等。快捷键行为利用快捷键映射表来
特征公式加,减,乘,除(按运算顺序) 引用单个单元格的能力能够将单元格范围(二维)作为函数参数传递大量兼容的Excel样式功能动态更新为参考值更新动态大小的列类似于Excel的键盘交互拖放拖动单元格移动拖动...
WebGL 之3D 引擎 Three.js 基础与 项目实战 方案:如何操作 WORD 文件 方案:如何破解 ACCESS2003的密 码 方案:如何直接打印文件 方案:如何创建椭圆形窗体 方案:如何创建不规则窗体 方案:如何创建文字形窗体 ...
借助KeyTable,您可以在DataTables增强型表(如Excel电子表格)上使用键盘导航-单元格显示焦点轮廓,可以使用键盘或鼠标操作来移动焦点轮廓。 这在使用编辑器的可编辑表中特别有用,该表允许最终用户非常快速地更新...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
实例053 通过鼠标的移动改变文本框的背景色 80 实例054 改变下拉列表框的背景色 82 实例055 带颜色变化的动态链接按钮 82 实例056 设置图片的样式 83 实例057 设置表格的样式 84 实例058 模拟的进度条 ...
进入后,你可以用方向键移动光标选择CMOS设置界面上的选项,然后按Enter进入副选单,用ESC键来返回上一级菜单,用PAGE UP和PAGE DOWN键来选择具体选项,F10键保留并退出BIOS设置。 1.STANDARD CMOS SETUP(标准...
网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp(2000)的光盘,安装时候选R,修复! Windows XP(包括 ...JS:javascript源文件 JSP:HTML网页,其中包含有对一个Java servlet...