日期:2014-05-16 浏览次数:20419 次
思路
假设初始坐标为(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集合的给定位置上插入一个新的单元格
?