<style type="text/css">
table
{
border-collapse: collapse;
border: 1px solid blue;
}
th, td
{
border: 1px solid blue;
}
</style>
</head>
<body>
<h3>根据键盘操作表格！注：IE6sp1 测试可用！FF2 不兼容。</h3>
tab：正向切换单元格。<br />
shift + tab：反向切换单元格。<br />
上下方向键：换行。<br />
左右方向键：文本框内移动光标。<br />
<table id="tbeTest">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>
<input type="text" style=" 100px;" value="yixianggao" />
</td>
<td>
<input type="text" style=" 50px; text-align: center;" value="29" />
</td>
<td>
<input type="text" style=" 150px;" value="Web Development" />
</td>
</tr>
<tr>
<td>
<input type="text" style=" 100px;" />
</td>
<td>
<input type="text" style=" 50px; text-align: center;" />
</td>
<td>
<input type="text" style=" 150px;" />
</td>
</tr>
</table>
<script type="text/javascript">
<!--
function $(sId)
{
return document.getElementById(sId);
}
/*
* 设置 键盘事件。
* 上下键换行、回车增加新行。
*/
function setCellKeyEvents(oTarget)
{
var upKeyCode = 38;
var downKeyCode = 40;
var enterKeyCode = 13;
var oCell;
for (var i=0; i<oTarget.cells.length; i++)
{
oCell = oTarget.cells[i];
oCell.onkeydown = function()
{
switch (event.keyCode)
{
case upKeyCode:
moveToPreviousRow(this);
break;
case downKeyCode:
moveToNextRow(this);
break;
case enterKeyCode:
appendNewRow(this);
break;
}
};
}
}
/*
* 上移一行。
*/
function moveToPreviousRow(oTd)
{
var startRowIndex = 1;
var curRowIndex = oTd.parentNode.rowIndex;
var curCellIndex = oTd.cellIndex;
if (curRowIndex != startRowIndex)
{
oTd.parentNode.previousSibling.cells[curCellIndex].firstChild.focus();
}
}
/*
* 下移一行。
*/
function moveToNextRow(oTd)
{
var endRowIndex = oTd.parentNode.parentNode.rows.length - 1;
var curRowIndex = oTd.parentNode.rowIndex;
var curCellIndex = oTd.cellIndex;
if (curRowIndex != endRowIndex)
{
oTd.parentNode.nextSibling.cells[curCellIndex].firstChild.focus();
}
}
/*
* 清空文本输入框。
*/
function clearTextBoxValve(oTarget)
{
var cInput = oTarget.getElementsByTagName("input");
for (var i=0; i<cInput.length; i++)
{
if (cInput[i].type.toLowerCase() == "text")
{
cInput[i].value = "";
}
}
}
/*
* 添加新行。
*/
function appendNewRow(oTd)
{
var endRowIndex = oTd.parentNode.parentNode.rows.length - 1;
var endCellIndex = oTd.parentNode.cells.length - 1;
var curRowIndex = oTd.parentNode.rowIndex;
var curCellIndex = oTd.cellIndex;
if (curRowIndex == endRowIndex
&& curCellIndex == endCellIndex)
{
var lastRow = oTd.parentNode.cloneNode(true);
clearTextBoxValve(lastRow);
oTd.parentNode.parentNode.appendChild(lastRow);
setCellKeyEvents(lastRow);
lastRow.firstChild.firstChild.focus();
}
}
var oTbe = $("tbeTest");
setCellKeyEvents(oTbe);
//-->
</script>
</body>