`

js 彷excel 键盘上下左右移动

阅读更多

思路
假设初始坐标为(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功能

    本项目旨在通过纯JS来模拟Excel的核心操作,包括焦点移动和单元格输入,为网页应用提供类似电子表格的功能。下面我们将深入探讨这些关键知识点。 首先,我们关注的是"仿照Excel焦点移动功能"。在Excel中,用户可以...

    自己写了一个支持粘贴复制,类似excel的jquery table小插件

    学完之后,没有练习,忘得差不多了,最近一个项目中要使用支持粘贴复制的table,选中表格的一部分区域,通过ctrl+v,可以把excel或者其它地方的数据粘贴到html table中,还能支持键盘上下左右键移动选择区域。...

    ECSHOP搜索框键盘上下切换JS控制.pdf

    标题中的"ECSHOP搜索框键盘上下切换JS控制"指的是在ECSHOP这个电子商务平台的搜索框中,通过JavaScript实现用户使用键盘上下键切换搜索建议的功能。这通常是为了提高用户体验,让用户在输入搜索关键词时能够方便地...

    原生js在线编辑excel表格代码.zip

    在这个场景中,我们关注的是一个名为"原生js在线编辑excel表格代码.zip"的压缩包,它包含了一个利用原生JavaScript实现的在线Excel表格编辑功能的插件。这个插件允许用户在网页上直接对Excel表格进行编辑,而无需...

    js与execel实现信息查询.rar

    - **键盘事件模拟**:项目可能使用了JavaScript的keydown、keyup和keypress事件来捕捉用户的键盘输入,然后根据Excel的逻辑来移动单元格的焦点,实现类似Excel的导航功能。 - **jQuery选择器和遍历**:jQuery提供了...

    仿excel的web表格输入控件

    首先,"支持上下左右键切换单元格焦点"是此类控件的一个关键特性。这使得用户可以通过键盘导航,如同在Excel中一样,快速地在不同的单元格之间移动。通过监听键盘事件,开发者可以实现这些功能,确保用户在网页表格...

    类似于Excel的表格控件

    在IT领域,尤其是在开发用户界面时,经常需要使用到类似于Excel的表格控件。这种控件使得应用程序能够呈现和操作数据,就像在Microsoft Excel中那样,提供了丰富的功能,包括编辑表格内容、添加或删除行、合并单元格...

    类似Excel的表格

    标题中的“类似Excel的表格”指的是使用JavaScript技术实现的一种能够在网页上展示和操作的数据表格控件,它提供了类似于Microsoft Excel的功能,让用户可以在浏览器环境中进行数据的编辑、排序、过滤等操作。...

    Handsontable-一款仿 Excel效果的表格插件

    5. **键盘导航**:为了提高效率,Handsontable支持全键盘操作,用户可以通过键盘快速移动和编辑单元格,就像在Excel中一样。 6. **插件系统**:通过插件机制,开发者可以扩展Handsontable的功能,例如集成自定义的...

    Excel样式表格单元格选择jQuery插件

    - 键盘导航:支持使用键盘上的方向键进行单元格的切换。 - 复制和粘贴:实现单元格数据的复制和粘贴操作。 - 数据验证:在用户编辑单元格内容时进行数据格式检查。 总结,"Excel样式表格单元格选择jQuery插件"通过...

    AJAX仿EXCEL表格

    一 键盘操作 1 Insert键增加一行 并复制最后一行内容 Delete键删除最后一行 该操作用以调节表格总大小; 2 Tab键横向移动光标 Enter键纵向移动光标 符合Excle用户习惯; 二 页面操作 1 全选:选择全部行 再次执行...

    AJAX仿EXCEL表格功能.rar

    2.Tab键横向移动光标,Enter键纵向移动光标,符合Excle用户习惯; 二 页面操作 1.全选:选择全部行,再次执行释放全部行; 2.复制所选:复制已经选择的行及其内容; 3.删除所选:删除已经选择的行; 4.清空所选...

    react-reactdatagrid类似Excel的网格组采用React开发

    4. **复制与粘贴**:用户可以像在Excel中一样,通过复制和粘贴功能快速地在单元格之间移动或复制数据,这对于数据处理非常方便。 5. **自定义列和行**:开发者可以根据需求自由定义列的显示样式和行为,如宽度、...

    JavaScript网页特效范例宝典源码

    实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 ...

    react-spreadsheet-grid:类似于Excel的网格组件,用于带有自定义单元格编辑器,高性能滚动和可调整大小的列的React

    React电子表格网格类似于Excel的网格组件,用于带有自定义单元格编辑器,高性能滚动和可调整大小的列的React主要特点这是一个类似于Excel的Spreadsheet Grid组件,它支持: :check_mark_button: 自定义单元格编辑器...

    js+html实现的Table可编辑

    这个项目使用了JavaScript(可能是jQuery或者其他JS库)和CSS来创建一个功能类似于文本编辑器中的表格。以下是对这个实现的一些关键知识点的详细解释: 1. **HTML Table元素**:HTML的`&lt;table&gt;`元素用于创建表格,...

    程序天下:JavaScript实例自学手册

    15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...

    javascript网页特效实例大全(8-12)

    实例311 屏蔽键盘相关事件 494 实例312 屏蔽鼠标右键 496 12.3 登录页面 497 实例313 具有浏览器检测功能的登录页面 497 实例314 防止SQL注入的登录页面 498 实例315 带验证码的登录页面 500 12.4 其他...

    《程序天下:JavaScript实例自学手册》光盘源码

    15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 ...

Global site tag (gtag.js) - Google Analytics