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