思路
假设初始坐标为(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集合的给定位置上插入一个新的单元格
分享到:
相关推荐
标题“键盘方向键移动表格中的光标(包含鼠标选择)”揭示了一个重要的操作技巧,即如何利用键盘和鼠标来精准控制表格内的光标移动及选区选择。下面将详细阐述这些知识点。 首先,键盘方向键在表格操作中的作用不可...
本项目旨在通过纯JS来模拟Excel的核心操作,包括焦点移动和单元格输入,为网页应用提供类似电子表格的功能。下面我们将深入探讨这些关键知识点。 首先,我们关注的是"仿照Excel焦点移动功能"。在Excel中,用户可以...
学完之后,没有练习,忘得差不多了,最近一个项目中要使用支持粘贴复制的table,选中表格的一部分区域,通过ctrl+v,可以把excel或者其它地方的数据粘贴到html table中,还能支持键盘上下左右键移动选择区域。...
标题中的"ECSHOP搜索框键盘上下切换JS控制"指的是在ECSHOP这个电子商务平台的搜索框中,通过JavaScript实现用户使用键盘上下键切换搜索建议的功能。这通常是为了提高用户体验,让用户在输入搜索关键词时能够方便地...
在这个场景中,我们关注的是一个名为"原生js在线编辑excel表格代码.zip"的压缩包,它包含了一个利用原生JavaScript实现的在线Excel表格编辑功能的插件。这个插件允许用户在网页上直接对Excel表格进行编辑,而无需...
- **键盘事件模拟**:项目可能使用了JavaScript的keydown、keyup和keypress事件来捕捉用户的键盘输入,然后根据Excel的逻辑来移动单元格的焦点,实现类似Excel的导航功能。 - **jQuery选择器和遍历**:jQuery提供了...
首先,"支持上下左右键切换单元格焦点"是此类控件的一个关键特性。这使得用户可以通过键盘导航,如同在Excel中一样,快速地在不同的单元格之间移动。通过监听键盘事件,开发者可以实现这些功能,确保用户在网页表格...
在IT领域,尤其是在开发用户界面时,经常需要使用到类似于Excel的表格控件。这种控件使得应用程序能够呈现和操作数据,就像在Microsoft Excel中那样,提供了丰富的功能,包括编辑表格内容、添加或删除行、合并单元格...
标题中的“类似Excel的表格”指的是使用JavaScript技术实现的一种能够在网页上展示和操作的数据表格控件,它提供了类似于Microsoft Excel的功能,让用户可以在浏览器环境中进行数据的编辑、排序、过滤等操作。...
5. **键盘导航**:为了提高效率,Handsontable支持全键盘操作,用户可以通过键盘快速移动和编辑单元格,就像在Excel中一样。 6. **插件系统**:通过插件机制,开发者可以扩展Handsontable的功能,例如集成自定义的...
- 键盘导航:支持使用键盘上的方向键进行单元格的切换。 - 复制和粘贴:实现单元格数据的复制和粘贴操作。 - 数据验证:在用户编辑单元格内容时进行数据格式检查。 总结,"Excel样式表格单元格选择jQuery插件"通过...
一 键盘操作 1 Insert键增加一行 并复制最后一行内容 Delete键删除最后一行 该操作用以调节表格总大小; 2 Tab键横向移动光标 Enter键纵向移动光标 符合Excle用户习惯; 二 页面操作 1 全选:选择全部行 再次执行...
2.Tab键横向移动光标,Enter键纵向移动光标,符合Excle用户习惯; 二 页面操作 1.全选:选择全部行,再次执行释放全部行; 2.复制所选:复制已经选择的行及其内容; 3.删除所选:删除已经选择的行; 4.清空所选...
4. **复制与粘贴**:用户可以像在Excel中一样,通过复制和粘贴功能快速地在单元格之间移动或复制数据,这对于数据处理非常方便。 5. **自定义列和行**:开发者可以根据需求自由定义列的显示样式和行为,如宽度、...
实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 ...
React电子表格网格类似于Excel的网格组件,用于带有自定义单元格编辑器,高性能滚动和可调整大小的列的React主要特点这是一个类似于Excel的Spreadsheet Grid组件,它支持: :check_mark_button: 自定义单元格编辑器...
这个项目使用了JavaScript(可能是jQuery或者其他JS库)和CSS来创建一个功能类似于文本编辑器中的表格。以下是对这个实现的一些关键知识点的详细解释: 1. **HTML Table元素**:HTML的`<table>`元素用于创建表格,...
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 ...