根据键盘操作表格

  <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="width: 100px;" value="yixianggao" />
            </td>
            <td>
                <input type="text" style="width: 50px; text-align: center;" value="29" />
            </td>
            <td>
                <input type="text" style="width: 150px;" value="Web Development" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" style="width: 100px;" />
            </td>
            <td>
                <input type="text" style="width: 50px; text-align: center;" />
            </td>
            <td>
                <input type="text" style="width: 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>

posted @ 2015-11-25 15:17  孙_大圣  阅读(192)  评论(0编辑  收藏  举报