javascript单元格用键盘变色

var selectedCell;
function setColorKey()
{
    var table = document.getElementById('table1');
    var key = window.event.keyCode;
    var cell =window.event.srcElement;
    var row = cell.parentElement;
   if(key==37)
   {
            var i = row.rowIndex;
            var j =  cell.cellIndex;
            var temp=table.rows[i].cells[j-1];
            temp.style.backgroundColor="#ccc";
            temp.className="selectedCell";
            selectedCell.className="";
            selectedCell=temp;
            }
     if(key==38)
     {
            var i = row.rowIndex;
            var j =  cell.cellIndex;
            var temp=table.rows[i-1].cells[j-5];
            temp.className="selectedCell";
            selectedCell.className="";
            selectedCell=temp;
            }
     if(key==39)
     {
            var i = row.rowIndex;
            var j =  cell.cellIndex;
            var temp=table.rows[i].cells[j+1];
            temp.className="selectedCell";
            selectedCell.className="";
            selectedCell=temp;
            }
      if(key==40)
      {
            var i = row.rowIndex;
            var j =  cell.cellIndex;
            var temp=table.rows[i+1].cells[j+5];
            temp.className="selectedCell";
            selectedCell.className="";
            selectedCell=temp;
            }帮帮忙，把这段代码改下啊
实现键盘也可以改变表格的颜色

解决方案 »

  1.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
            <style>
                .selectedCell{
                    background-color:red;
                }
            </style>
        </head>
        <script language=javascript>
            var selectedCell;
            var nowRow=0;
            var nowCell=0;
            function setColorKey()
            {
                var table = document.getElementById('table1');
                if(!selectedCell){
                    selectedCell=table.rows[nowRow].cells[nowCell];
                }
                var rowLen=table.rows.length;
                var cellLen=table.rows[0].cells.length;
                var key = window.event.keyCode;
                var cell =window.event.srcElement;
                var row = cell.parentElement;
                if(key==37)  //左
                {
                    if(nowCell--<=0) {
                        nowCell=0;
                        return;
                    }
                    var temp=table.rows[nowRow].cells[nowCell];
                    temp.className="selectedCell";
                    selectedCell.className="";
                    selectedCell=temp;
                }
                if(key==38)  //上
                {
                    if(nowRow--<=0) {
                        nowRow=0;
                        return;
                    }
                    var temp=table.rows[nowRow].cells[nowCell];
                    temp.className="selectedCell";
                    selectedCell.className="";
                    selectedCell=temp;
                }
                if(key==39)  //右
                {
                    if(nowCell++>cellLen-2) {
                        nowCell=cellLen-1;
                        return;
                    }
                    var temp=table.rows[nowRow].cells[nowCell];
                    temp.className="selectedCell";
                    selectedCell.className="";
                    selectedCell=temp;
                }
                if(key==40) //下
                {
                    if(nowRow++>rowLen-2) {
                        nowRow=rowLen-1;
                        return;
                    }
                    var temp=table.rows[nowRow].cells[nowCell];
                    temp.className="selectedCell";
                    selectedCell.className="";
                    selectedCell=temp;
                }
            }
        </script>
        <body onKeyDown="setColorKey()">
            <table id="table1" border=1px gray>
                <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
                <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
                <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
                <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
                <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
            </table>    </body>
    </html>