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:

 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 (c0){
	 	x=r;
		y=c-1;
	 }
  }
  zhiZaoID.rows[x].cells[y].children[0].focus();
  return;
}

 

表格操作常用方法

(1)captiong ：只想元素（如果存在);
(2)tBodies:元素的集合
(3)tFoot：指向元素（如果存在);
(4)tHead:指向元素(如果存在)
(5)rows:表格中所有行的集合
(6)createTHead():创建元素并将其放入表格
(7)createTFoot():创建元素并将其放入表格
(8)createCaption():创建元素并将其放入表格
(9)deleteThead()：删除元素
(10)deleteTFoot():删除元素
(11)deleteCaption():删除元素
(12)deleteRow(position):删除指定位置上的行
(13)insertRow(position):在rows集合中的指定位置上插入一个新行
元素添加了以下内容：
(1)rows:中所有的行的集合
(2)deleteRow(position):删除指定位置上的行
(3)insertRow(position):在rows集合中的指定位置上插入一个新行
元算中添加了一下内容：
(1)cells:元素中所有的单元格的集合
(2)deleteCell(position):删除给定位置上的单元格
(3)insertCell(position):在cells集合的给定位置上插入一个新的单元格