javaScript中如何用上下左右四个键控制表格

一个五行五列的表格，要求用鼠标和键盘的方向键都能同时控制表格。点到那个单元格那个单元格就变色。然后就用方向键也可以控制。急。

解决方案 »

  1.   


    <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<5; 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);
                    col4=newRow.insertCell(3);
                    col5=newRow.insertCell(4);
                    col1.id="1 "+colno
                    col2.id = "2 "+colno;
                    col3.id = "3 "+colno;
                    col4.id="4 "+colno
                    col5.id = "5 "+colno;                col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col4.innerText = "列四"+colno;
                    col5.innerText = "列五"+colno;
                    col1.onclick=alertMe;
                    col2.onclick=alertMe;
                    col3.onclick=alertMe ;
                    col4.onclick=alertMe;
                    col5.onclick=alertMe ;
                    col1.onkeyup=showMe;
                    col2.onkeyup=showMe;
                    col3.onkeyup=showMe;
                    col4.onkeyup=showMe;
                    col5.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<4){
                        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<5){
                        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>
                    <TH width="36" >列4</TH>
                    <TH width="36" >列5</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE>
    </body>
    </html>
      

  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> new document </title>
      <style>
    table {
    border: 1px solid #7B7B7B;
    border-collapse: collapse;
    }
    td {
    border: 1px solid #7B7B7B;
    width: 60px;
    height: 30px;
    }
      </style>
     </head> <body>
    <table id="otbl" onclick="changeColor(event);">
    <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    </tr>
    </table>
      <script type="text/javascript">
      <!--
    var currentTd = null;
    function changeColor(e){
    var e = e || window.event;
    currentTd != null && (currentTd.style.backgroundColor = "#FFF");
    currentTd = e.srcElement || e.target;
    currentTd.style.backgroundColor = "#FFCC99";
    } var MoveColor = function(tblId,cellLen, rowLen){
    this.tbl = document.getElementById(tblId);
    this.currentTd = currentTd;
    this.currentTr = this.currentTd.parentNode;
    this.rowindex = this.currentTr.rowIndex;
    this.cellindex = this.currentTd.cellIndex;
    this.maxCell = cellLen;
    this.maxRow = rowLen;
    } MoveColor.prototype = {
    init: function(e){
    var e = e || window.event;
    if((this.currentTd != null) && (this.currentTd.tagName.toLowerCase() == "td")){
    switch(e.keyCode){
    case 37:
    --this.cellindex >=0  && this.ShowColor();
    break;
    case 38:
    --this.rowindex >=0 && this.ShowColor();
    break;
    case 39:
    ++this.cellindex < this.maxCell && this.ShowColor();
    break;
    case 40:
    ++this.rowindex < this.maxRow && this.ShowColor();
    break;
    }
    }
    }, ShowColor: function(){
    currentTd.style.backgroundColor = "#FFFFFF";
    currentTd = this.tbl.rows[this.rowindex].cells[this.cellindex];
    currentTd.style.backgroundColor = "#FFCC99";
    }
    } document.onkeydown = function(e){
    var moveColor = new MoveColor('otbl', 5, 5); // tableId, maxCellLen, maxRowLen
    moveColor.init(e)
    }
      //-->
      </script>
     </body>
    </html>
      

  3.   

    http://blog.csdn.net/liuxiaoyi666/archive/2004/12/31/236102.aspx
      

  4.   

    这个例子很爽。http://blog.csdn.net/sunxing007/archive/2009/07/23/4374693.aspx