急用

我想做一个表格要求支持方向键和回车键，当光标在最后一行最后一列时，按下回车键自动添加新的行。帮帮忙吧！谢谢了。
  

解决方案 »

  1.   


    //创建列表对象
    var list = {
        CallBack:"",
        obj:{},
        init:function(){
            this.obj = document.getElementById("MainTable");
            this.obj.childNodes(0).childNodes(1).style.display = "none";
            this.add();
        },
    add: function(){

    var Row = this.obj.insertRow() ;
    Row.align = "center" ;
    var Len = this.obj.childNodes(0).childNodes(0).childNodes.length ;
    var Col ,Inp ;

    //增加列
    for (var i=0 ; i<Len ;i++)
    {
    Col = Row.insertCell();
    Inp = this.obj.childNodes(0).childNodes(1).childNodes(i);
    Col.innerHTML = Inp.innerHTML ;
    Col.innerHTML = Col.innerHTML.replace("</ITEM>" ,"") ;

    if (i == Len - 1)
    {
    this.eve(Col.childNodes(0) ,"onkeydown" , this.e13 , i ,1)
    }
    else
    {
    this.eve(Col.childNodes(0) ,"onkeydown" , this.e13 , i ,0)
    } }
    //定位光标
    var TempObj = this.obj.rows(this.obj.rows.length-1).childNodes(0).childNodes(0);
    TempObj.focus()

    //回调函数
    if(typeof this.CallBack == "function")
    {
        this.CallBack(TempObj);
    }
    },
    e13: function(thisobj , index ,sn)
    {
    //回车键
    if(event.keyCode == 13)
    {
    if (sn == 1)
    {
    if(thisobj.parentNode.parentNode.nextSibling == null)
    {
    list.add();
    }
    }
        if(event != null)
        {
            event.returnValue = false;
        }
    }
    //左方向键
    else if(event.keyCode == 37)
    {
    if(thisobj.parentNode.previousSibling != null)
    {
    thisobj.parentNode.previousSibling.childNodes(0).focus();
    }
    }
    //右方向键
    else if(event.keyCode == 39)
    {
    event.keyCode = 9 ;
    }
    //上方向键
    else if(event.keyCode == 38)
    {
    if(thisobj.parentNode.parentNode.previousSibling != null)
    {
        if(thisobj.parentNode.parentNode.previousSibling.style.display != "none")
        {
        thisobj.parentNode.parentNode.previousSibling.childNodes(index).childNodes(0).focus();
    }
    }
    }
    //下方向键
    else if(event.keyCode == 40)
    {
    if(thisobj.parentNode.parentNode.nextSibling != null)
    {
    thisobj.parentNode.parentNode.nextSibling.childNodes(index).childNodes(0).focus();
    }
    }
    else
    {
        return;
    }
    },
    //注册事件
    eve: function(obj, ex , func ,i ,sn){

    obj.setAttribute(
    ex ,
    function(){
    return func(obj , i , sn) ;
    }
    ) ;
    }
    };
      

  2.   

    试试看
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>dhtml.table.controlByKeyboard.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <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;" />
                </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 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 upKeyCode = 38;
    var downKeyCode = 40;
    var enterKeyCode = 13;var oTbe = $("tbeTest");setCellKeyEvents(oTbe);
        //-->
        </script>
    </body>
    </html>
    送你三本手册！DHTML参考手册
    http://download.csdn.net/source/308913样式表中文手册
    http://download.csdn.net/source/304124JScript语言参考
    http://download.csdn.net/source/308916
      

  3.   

    微调了一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>dhtml.table.controlByKeyboard.html</title>
        <meta name="generator" content="editplus" />
        <meta name="author" content="Gao YiXiang" />
        <meta name="email" content="[email protected]" />
        <meta name="keywords" content="javascript dhtml dom" />
        <meta name="description" content="I love web development." />
        <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>
    </html>