页面加载后获取table里任一td的焦点

页面加载后获取table里任一td的焦点，按onkeydown上下左右方向键之后焦点可以移动，请教大虾~~！！！

解决方案 »

  1.   

    倒，网页做成excel效果
    只能给每个td加ID了然后使用getElementById调用了
      

  2.   

    可以做到，把所有td都看到对象给上id放在2维数组中
    当左右移动时进行计算，哪个td应处于焦点状态
    js可以实现
      

  3.   

    用构造法，构造名字或是ID都行。
    可以成2维数组，也可以成特殊变化的数列。
    在根据关系，get它的名字或id，得到td标签。
      

  4.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onclick=alertMe;
                    col2.onclick=alertMe;
                    col3.onclick=alertMe ;
                    col1.onkeyup=showMe;
                    col2.onkeyup=showMe;
                    col3.onkeyup=showMe;
                }
            }
            function alertMe(){
                if(cur == this) return false;
                if(cur!=null) cur.style.backgroundColor = THCOLOR;
                this.style.backgroundColor = NEW_COLOR;
                cur = this;
                var id=this.id.split(" ");
                nowcol=parseInt(id[0]);
                nowrow=parseInt(id[1]);
            }
            function showMe(){
                if(event.keyCode==38){                           
                    if(nowrow>0){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==40){
                    if(nowrow<14){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==37){
                    if(nowcol>1){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    };
                }
                if(event.keyCode==39){
                    if(nowcol<3){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
               
            }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>
      

  5.   


    <script>
    var cur;
    function doit(){
       var k = event.keyCode;
       var tbl = document.getElementById("tb");
       var c = cur.cellIndex;
       var r = cur.parentNode.rowIndex;
       cur.style.backgroundColor = "#FFF";
       switch(k){
         case 37:
          if(c == 0){
          c = tbl.rows[0].cells.length-1;
          if(r==0) r = tbl.rows.length-1
          else r--;
          }
          else c--;
          break;
         case 38:
          if(r==0){
          r = tbl.rows.length-1;
          if(c==0) c = tbl.rows[0].cells.length-1;
          else c--;
          }
          else r--;
          break;
         case 39:
          if(c==tbl.rows[0].cells.length-1){
          c =0;
          if(r==tbl.rows.length-1) r=0;
          else r++;
          }
          else c++;
          break;
         case 40:
          if(r==tbl.rows.length-1){
          r = 0;
          if(c==tbl.rows[0].cells.length-1) c = 0;
          else c++;
          }
          else r++;
          break;
      }
      cur = tbl.rows[r].cells[c];
      cur.style.backgroundColor = "#CCC";}
    window.onload=function(){
      document.onkeyup = doit;
      var tbl = document.getElementById("tb");
      cur = tbl.rows[0].cells[0];
      cur.style.backgroundColor = "#CCC";
    }
    </script>
    <table id="tb" border="1">
    <tr><td>11</td><td>12</td><td>13</td></tr>
    <tr><td>21</td><td>22</td><td>23</td></tr>
    <tr><td>31</td><td>32</td><td>33</td></tr>
    <tr><td>41</td><td>42</td><td>43</td></tr>
    </table> 
      

  6.   

     小修改了下,修改了点bug<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="red";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onclick=alertMe;
                    col2.onclick=alertMe;
                    col3.onclick=alertMe ;
                    col1.onkeyup=showMe;
                    col2.onkeyup=showMe;
                    col3.onkeyup=showMe;
                }
            }
            function alertMe(){
                if(cur == this) return false;
                if(cur!=null) cur.style.backgroundColor = THCOLOR;
                this.style.backgroundColor = NEW_COLOR;
                cur = this;
                var id=this.id.split(" ");
                if(nowcol!=-1&&nowrow!=-1){
                    document.getElementById(nowcol+" "+nowrow).style.backgroundColor=THCOLOR;
                }
                nowcol=parseInt(id[0]);
                nowrow=parseInt(id[1]);
            }
            function showMe(){
                if(event.keyCode==38){                           
                    if(nowrow>0){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==40){
                    if(nowrow<14){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==37){
                    if(nowcol>1){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    };
                }
                if(event.keyCode==39){
                    if(nowcol<3){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
               
            }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>
      

  7.   


    <style>
    td{
    background-color:#FFF;
    }
    </style><table cellspacing="1" cellpadding="1" bgcolor="black" width="100%" height="50%" id="table1">
    <tr>
    <td><input value="1" /></td>
    <td><input value="2" /></td>
    <td><input value="3" /></td>
    </tr>
    <tr>
    <td><input value="4" /></td>
    <td><input value="5" /></td>
    <td><input value="6" /></td>
    </tr>
    </table><script>
    document.getElementById("table1").onkeydown = function(e){
    e = window.event || e;
    var obj = e.srcElement || e.target; // 上
    if(e.keyCode == 38){try{
    var index = obj.parentNode.cellIndex;
    var tr = obj.parentNode.parentNode.previousSibling;// 得到当前控件上一个 tr
    tr = tr.nodeType == 3 ? tr.previousSibling : tr;// 为了兼容 FF

    if(tr != null && tr.tagName != null && /^tr$/i.test(tr.tagName)){
    if(tr.cells[index] != null){
    tr.cells[index].childNodes[0].focus();
    }
    }{// tr 不存在，或不是 tr
    return false;
    }}catch(ex){alert(ex.message)}
    } // 下
    if(e.keyCode == 40){
    var index = obj.parentNode.cellIndex;
    var tr = obj.parentNode.parentNode.nextSibling;// 得到当前控件下一个 tr
    tr = tr.nodeType == 3 ? tr.nextSibling : tr; if(tr != null && tr.tagName != null && /^tr$/i.test(tr.tagName)){
    if(tr.cells[index] != null){
    tr.cells[index].childNodes[0].focus();
    }
    }else{// tr 不存在，或不是 tr
    return false;
    }
    } // 左
    if(e.keyCode == 37){
    var index = obj.parentNode.cellIndex;
    var tr = obj.parentNode.parentNode;// 得到当前 tr
    if(tr != null && tr.tagName != null && /^tr$/i.test(tr.tagName)){
    if(tr.cells[index - 1] != null){
    tr.cells[index - 1].childNodes[0].focus();
    }
    }else{// tr 不存在，或不是 tr
    return false;
    }
    } // 右
    if(e.keyCode == 39){
    var index = obj.parentNode.cellIndex;
    var tr = obj.parentNode.parentNode;// 得到当前 tr
    if(tr != null && tr.tagName != null && /^tr$/i.test(tr.tagName)){
    if(tr.cells[index + 1] != null){
    tr.cells[index + 1].childNodes[0].focus();
    }
    }else{// tr 不存在，或不是 tr
    return false;
    }
    }
    }
    </script>
      

  8.   

    大虾，你这个想要的结果差不多，如果第二行的里面加上txt文本框，和select框，我移动上去，怎么把焦点取得，让用户直接就可以输入查询条件，然后还可以移出来呢
      

  9.   

    随便在 td 里面加，只要无嵌套（TD里面无容器）就行比如下面这种就 over 了
    <td><div><input /></div></td>
    正确的：
    <td><input /><select></select></td>（如果有嵌套，就只有循环得到 tr ，然后继续上面的代码）
      

  10.   

    在我这个里面你可以用document.getElementById(nowcol+"1"+nowrow),innerText得到当前选中的input<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="red";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerHTML = "<input type=text id=11"+colno+">";
                    col2.innerHTML = "<input type=text id=21"+colno+">";
                    col3.innerHTML = "<input type=text id=31"+colno+">";
                    col1.onclick=alertMe;
                    col2.onclick=alertMe;
                    col3.onclick=alertMe ;
                    col1.onkeyup=showMe;
                    col2.onkeyup=showMe;
                    col3.onkeyup=showMe;
                }
            }
            function alertMe(){
                if(cur == this) return false;
                if(cur!=null) cur.style.backgroundColor = THCOLOR;
                this.style.backgroundColor = NEW_COLOR;
                cur = this;
                var id=this.id.split(" ");
                if(nowcol!=-1&&nowrow!=-1){
                    document.getElementById(nowcol+" "+nowrow).style.backgroundColor=THCOLOR;
                }
                nowcol=parseInt(id[0]);
                nowrow=parseInt(id[1]);
            }
            function showMe(){
                if(event.keyCode==38){
                    if(nowrow>0){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow);
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==40){
                    if(nowrow<14){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==37){
                    if(nowcol>1){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    };
                }
                if(event.keyCode==39){
                    if(nowcol<3){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }        }
            window.onload=function(){
                createEventTable();
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>
      

  11.   

    既然看成2维的 那TD不用设置ID
    只要获取 行列的坐标就可以定位了
      

  12.   

      <script type="text/javascript">
    /**
    Support：Opera7+
    **/
        var CTable = new Object();
         var oTable = null;
        //列数
        CTable.colCount=0;
        //行数
        CTable.rowCount=0;
        //Table Map
        CTable.Map = null;
        //前一单元格的行号，默认为-1
        CTable.prevRow = -1;
        //前一单元格的列号，默认为-1
        CTable.prevCol = -1;
        //当前行号，默认为-1
        CTable.curRow=-1;
        //当前列号，默认为-1
        CTable.curCol=-1;
        //待操作元素的Tag Name
        CTable.Element="td";
        //载入table
        CTable.Load = function(a_sID,a_sTagName){
            var iRowCount=0, iColCount=0, i, j, m, n, iIndex=0, iCount;
            oTable = document.getElementById(a_sID);
           
            //设置tble属性
            if (oTable!=null) {
                var tableMap = [];
                for (i=0 ; i < oTable.rows[0].cells.length ; ++i ) {
                    iColCount += oTable.rows[0].cells[i].colSpan;
                }
                //获取总行数
                iRowCount = oTable.rows.length;
                //监听click事件
                oTable.getElementsByTagName('tbody')[0].onclick=CTable_setFocus;
                //监听keydown事件
               // document.getElementsByTagName('body')[0].onkeydown=CTable_moveFocus;
                //列数
                CTable.colCount = iColCount;
                //行数
                CTable.rowCount = iRowCount;
    //table map start
                //Init Table Map
                var aCols=null, oCell;
     
                for (i=0; i<iRowCount; ++i) {
                    aCols = new Array(iColCount);
                    tableMap.push(aCols);
                }
                for (i=0; i<iRowCount; ++i) {
                    iIndex=0;
                    for (j=0; j<iColCount; j+=oCell.colSpan) {
                        if (tableMap[i][j]==null) {
                            oCell = oTable.rows[i].cells[iIndex++];
                            for(m=i; m<i+oCell.rowSpan; ++m) {
                                for(n=j; n<j+oCell.colSpan; ++n) {
                                    tableMap[m][n] = i+','+j;
                                }
                            }
                            tableMap[i][j] = oCell;
                        }
                    }
                }
    //table map结束
                CTable.Map = tableMap;
            }
     
        };//end CTable.Load
        //鼠标点击设置焦点  DOM:e.target
        function CTable_setFocus(event){
          
        }
        //移动焦点
        function CTable_moveFocus(event) {
            //获取当前结点
            var e =  event || window.event;
            var obj = e.target || e.srcElement, oParent = obj.parentNode;
            alert(document.all.tblTest.rows[0].cells[0]);
             
             
            var iCurRow = CTable.curRow, iCurCol = CTable.curCol;
            var oPrevNode = CTable.getNode(CTable.prevRow,CTable.prevCol);
            var iColCount = CTable.colCount;
            var aMaps = CTable.Map;
            if (oParent.tagName.toUpperCase() != "TR") {
                return;
            }
    if (oPrevNode) {
        oPrevNode.bgColor="#FFFFF0";
    }
     
            iCurRow = oParent.rowIndex;
            for (var i=0; i<iColCount; i++){
                if (aMaps[iCurRow][i]==obj) {
                    iCurCol = i;
                    break;
                }
            }
       
            //设置结点的位置
            CTable.curRow = iCurRow;
            CTable.curCol = iCurCol;
            if (CTable.prevRow ==-1 || CTable.prevCol==-1) {
                CTable.prevRow = iCurRow;
                CTable.prevCol = iCurCol;
            }
    obj.bgColor ="#FF0000";
            obj.focus();
            
            
            
            
                    var oNode = e.target || e.srcElement;
            var oNext = null;
            switch (e.keyCode) {
            case 37://2
                oNext = CTable_getNextNode(2);
                break;
            case 38://↑ 0
            
                oNext = CTable_getNextNode(0);
                break;
            case 13://回车
             aa();
             break;
            case 39://→3
            
                oNext = CTable_getNextNode(3);
                break;
            case 40://↓1
            
                oNext = CTable_getNextNode(1);
                break;
            }//end switch
    //改变背景色
    if (oNext) {
        oNext.focus();
        oNext.bgColor="#336699";
    }
        }//end moveFocus
        //获取指定行、列号的单元格
        CTable.getNode = function(a_iRow,a_iCol) {
            //如果行号或列号小于零，则返回null
            if (a_iRow<0 || a_iCol<0) {
                return null;
            }
            //初始化数据
            var oNode=null;
            var aMaps = CTable.Map, aTemps=null;
            var iRow = a_iRow, iCol=a_iCol;
            var sTemp="";
            //获取结点
            while(true) {
                oNode = aMaps[iRow][iCol];
                sTemp=typeof(oNode);
      
                if (sTemp.toLowerCase()=="string") {
                    aTemps=oNode.split(",");
                    iRow = aTemps[0];
                    iCol = aTemps[1];
                } else {
                    break;
                }
            }
            //函数返回值
            return oNode;
        };//end CTable.getNode
        //获取一下结点
        function CTable_getNextNode(a_iDirection) {
            var oNode = null;
            var iCol = CTable.curCol ,iRow=CTable.curRow;
            var iRowCount = CTable.rowCount, iColCount=CTable.colCount;
            var aMaps = CTable.Map, aTemps=null;
            var iCurCol=iCol, iCurRow = iRow, iTemp;
            var sTemp="", sStr="";
      
            oNode = aMaps[iRow][iCol];
            if (typeof(oNode)=="string") {
                aTemps = oNode.split(",");
                iCurRow = aTemps[0];
                iCurCol = aTemps[1];
            }
            while (true) {
                switch(a_iDirection) {
                case 0:
                    iRow--;
                    break;
                case 1:
                    iRow++;
                    break;
                case 2:
                    iCol--;
                    if (iCol<0) {
                        iCol = iColCount-1;
                        iRow--;
                    }
                     break;
                case 3:
                    iCol++;
                    if (iCol>=iColCount) {
                        iRow++;
                        iCol=0;
                    }
                    break;
                }
                if (iRow<0) {iRow=iRowCount-1;}
                if (iRow>=iRowCount) {iRow=0;}
                if ((iCurRow == iRow) && (iCurCol == iCol)) {
                    continue;
                }
                oNext = aMaps[iRow][iCol];
                sTemp=typeof(oNext);
                if (sTemp.toLowerCase()=="string") {
                    aTemps=oNext.split(",");
                    if ((iCurRow!=aTemps[0]) || (iCurCol!=aTemps[1])) {
                        oNext = CTable.getNode(iRow,iCol);                   
                        break;
                    }
                    continue;
                }
      
                break;
            }; //end CTable.getNextNode
            switch(a_iDirection) {
            case 0://上
            case 1://下
                if (oNext.colSpan>1) {
                    iTemp = CTable.curCol;
                    CTable.prevCol = iTemp;
                    CTable.prevRow = CTable.curRow;
                    CTable.curRow = iRow;
                } else {
                    CTable.prevCol = CTable.curCol;
                    CTable.prevRow = CTable.curRow;
                    CTable.curCol = iCol;
                    CTable.curRow = iRow;
                }
                break;
            case 2://左
            case 3://右
                if (oNext.rowSpan>1) {
                    CTable.prevCol = CTable.curCol;
                    CTable.curCol = iCol;
                    iTemp = CTable.curRow;
                    CTable.curRow = iRow;
                    CTable.prevRow = iTemp;
                } else {
                    CTable.prevCol = CTable.curCol;
                    CTable.prevRow = CTable.curRow;
                    CTable.curCol = iCol;
                    CTable.curRow = iRow;
                }
                break;
            }
            var oPrev = CTable.getNode(CTable.prevRow,CTable.prevCol);
    if (oPrev) {
        oPrev.bgColor="#FFFFFF";
    }
            return oNext;
        }
      
         //窗体载入函数
       window.onload=function() {CTable.Load("tblTest","td");};
        
    </script>  
      

  13.   

    谁帮我改下，把用鼠标单击单元格获得焦点改成一加载页面就获得移动焦点或者onkeydown的时候获得移动焦点？
      

  14.   

    这样改,多少行列都不会出错,创建不规则的时候自己改动下创建部分代码就行了,很简单<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="red";
            var cur;
            var nowcol=-1;
            var nowrow=-1;
            
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col1.innerHTML = "<input type=text id=11"+colno+">";
                    col2.innerHTML = "<input type=text id=21"+colno+">";
                    col3.innerHTML = "<input type=text id=31"+colno+">";
                    col1.onclick=alertMe;
                    col2.onclick=alertMe;
                    col3.onclick=alertMe ;
                    col1.onkeyup=showMe;
                    col2.onkeyup=showMe;
                    col3.onkeyup=showMe;
                }
            }
            function alertMe(){
                if(cur == this) return false;
                if(cur!=null) cur.style.backgroundColor = THCOLOR;
                this.style.backgroundColor = NEW_COLOR;
                cur = this;
                var id=this.id.split(" ");
                if(nowcol!=-1&&nowrow!=-1){
                    document.getElementById(nowcol+" "+nowrow).style.backgroundColor=THCOLOR;
                }
                nowcol=parseInt(id[0]);
                nowrow=parseInt(id[1]);
            }
            function showMe(){
                if(event.keyCode==38){
                    if(document.getElementById(nowcol+" "+(nowrow-1))){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow);
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==40){
                    if(document.getElementById(nowcol+" "+(nowrow+1))){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowrow++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }
                if(event.keyCode==37){
                    if(document.getElementById((nowcol-1)+" "+nowrow)){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol--;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    };
                }
                if(event.keyCode==39){
                    if(document.getElementById((nowcol+1)+" "+nowrow)){
                        var td=document.getElementById(nowcol+" "+nowrow);
                        td.style.backgroundColor = THCOLOR;
                        nowcol++;
                        var nexttd=document.getElementById(nowcol+" "+nowrow)
                        document.getElementById(nowcol+"1"+nowrow).focus();
                        nexttd.style.backgroundColor = NEW_COLOR;
                    }
                }        }
            window.onload=function(){
                createEventTable();
                document.getElementById("1 0").onclick()
                document.getElementById("110").focus()
            }
        </script>
        <body >
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="22px" bgColor="#ccecff">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>