[高分求助] 求一套较复杂的页面操控程序，参与讨论的内容有借鉴意义，则都有分数相赠，谢谢。

提供一个思路，具体请实现一下。//对每一个td设定id,把键盘事件加到onclick事件中去
function addEvent()
{
var objList = new Array(1,2,3,4,5,.....30);
for(i=0;i++;i<objList.length)
{
var obj= objList[i];
obj.attachEvent("onclick","KeyOnclick");
}
}//这儿写键盘事件的功能
function KeyOnclick()
{
//function.....
}
}//html
//定义每一个对象
<table>
<tr><td id=1>1</td>....</tr>
<tr><td id=11>11</td>....</tr>
<tr><td id=21>21</td>....</tr>
</table>

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    </head><body>
    <table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
      </tr>
    </table>
    <table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000">
      <tr>
        <td width="20" height="20" bordercolor="#999999" bgcolor="#FF0000">&nbsp;</td>
        <td width="20" align="center" bordercolor="#999999" id="sred">0</td>
      </tr>
      <tr>
        <td height="20" bordercolor="#999999" bgcolor="#FFFF00">&nbsp;</td>
        <td align="center" bordercolor="#999999" id="syellow">0</td>
      </tr>
      <tr>
        <td height="20" bordercolor="#999999" bgcolor="#0000FF">&nbsp;</td>
        <td align="center" bordercolor="#999999" id="sblue">0</td>
      </tr>
    </table>
    </body>
    </html>
    <script language="javascript">
    var boxs = new Array();
    var focusarray = 0;
    var focusedtd = null;
    var cred = 0;
    var cyellow = 0;
    var cblue = 0;
    var ored = document.getElementById("sred");
    var oyellow = document.getElementById("syellow");
    var oblue = document.getElementById("sblue");function document.onkeypress()
    {
    switch(window.event.keyCode)
    {
    case 45:
    arrmove(-1);break;
    case 43:
    case 13:
    arrmove(1);break;
    case 47:
    if(confirm("重置全部?"))
    for(var i=0;i<boxs.length;i++)
    changeColor(i,0);
    break;
    case 42:
    changeColor(focusarray,0);break;
    case 49:
    changeColor(focusarray,1);break;
    case 50:
    changeColor(focusarray,2);break;
    case 51:
    changeColor(focusarray,3);break;
    default:
    break;
    }
    }function changeColor(index,icolor)
    {
    switch(boxs[index].scolor)
    {
    case 1: cred--;break;
    case 2: cyellow--;break;
    case 3: cblue--;break;
    }
    switch(icolor)
    {
    case 0: scolor = "";break;
    case 1: scolor = "#FF0000";cred++;break;
    case 2: scolor = "#FFFF00";cyellow++;break;
    case 3: scolor = "#0000FF";cblue++;break;
    }
    boxs[index].scolor = icolor;
    boxs[index].bgColor = scolor;
    ored.innerText = cred;
    oyellow.innerText = cyellow;
    oblue.innerText = cblue;
    }function arrmove(num)
    {
    boxs[focusarray].borderColor = "#999999";
    focusarray+=num;
    if(focusarray<0)focusarray+=30;
    if(focusarray>29)focusarray-=30;
    boxs[focusarray].borderColor = "#FF0000";
    }function window.onload()
    {
    var tablebox = document.getElementById("table1");
    for(var i=0;i<tablebox.cells.length;i++)
    {
    var tempobj = tablebox.cells[i];
    tempobj.onclick = function(){arrmove(this.boxindex-focusarray);}
    tempobj.style.cursor = "hand";
    tempobj.align = "center";
    tempobj.borderColor = "#999999";
    tempobj.setAttribute("boxindex",i);
    tempobj.setAttribute("scolor",0);
    boxs.push(tempobj);
    }
    tdfocus(boxs[0]);
    focusarray = 0;
    ored.innerText = 0;
    oyellow.innerText = 0;
    oblue.innerText = 0;
    }
    </script>
      

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    </head><body>
    <table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000" id="table1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
      </tr>
    </table>
    <table border="1" cellpadding="0" cellspacing="2" bordercolor="#000000">
      <tr>
        <td width="20" height="20" bordercolor="#999999" bgcolor="#FF0000">&nbsp;</td>
        <td width="20" align="center" bordercolor="#999999" id="sred">0</td>
      </tr>
      <tr>
        <td height="20" bordercolor="#999999" bgcolor="#FFFF00">&nbsp;</td>
        <td align="center" bordercolor="#999999" id="syellow">0</td>
      </tr>
      <tr>
        <td height="20" bordercolor="#999999" bgcolor="#0000FF">&nbsp;</td>
        <td align="center" bordercolor="#999999" id="sblue">0</td>
      </tr>
    </table>
    </body>
    </html>
    <script language="javascript">
    var boxs = new Array();
    var focusarray = 0;
    var focusedtd = null;
    var cred = 0;
    var cyellow = 0;
    var cblue = 0;
    var ored = document.getElementById("sred");
    var oyellow = document.getElementById("syellow");
    var oblue = document.getElementById("sblue");function document.onkeypress()
    {
    switch(window.event.keyCode)
    {
    case 45:
    arrmove(-1);break;
    case 43:
    case 13:
    arrmove(1);break;
    case 47:
    if(confirm("重置全部?"))
    for(var i=0;i<boxs.length;i++)
    changeColor(i,0);
    break;
    case 42:
    changeColor(focusarray,0);break;
    case 49:
    changeColor(focusarray,1);break;
    case 50:
    changeColor(focusarray,2);break;
    case 51:
    changeColor(focusarray,3);break;
    default:
    break;
    }
    }function changeColor(index,icolor)
    {
    switch(boxs[index].scolor)
    {
    case 1: cred--;break;
    case 2: cyellow--;break;
    case 3: cblue--;break;
    }
    switch(icolor)
    {
    case 0: scolor = "";break;
    case 1: scolor = "#FF0000";cred++;break;
    case 2: scolor = "#FFFF00";cyellow++;break;
    case 3: scolor = "#0000FF";cblue++;break;
    }
    boxs[index].scolor = icolor;
    boxs[index].bgColor = scolor;
    ored.innerText = cred;
    oyellow.innerText = cyellow;
    oblue.innerText = cblue;
    }function arrmove(num)
    {
    boxs[focusarray].borderColor = "#999999";
    focusarray+=num;
    if(focusarray<0)focusarray+=30;
    if(focusarray>29)focusarray-=30;
    boxs[focusarray].borderColor = "#FF0000";
    }function window.onload()
    {
    var tablebox = document.getElementById("table1");
    for(var i=0;i<tablebox.cells.length;i++)
    {
    var tempobj = tablebox.cells[i];
    tempobj.onclick = function(){arrmove(this.boxindex-focusarray);}
    tempobj.style.cursor = "hand";
    tempobj.align = "center";
    tempobj.width = 20;
    tempobj.height = 20;
    tempobj.borderColor = "#999999";
    tempobj.setAttribute("boxindex",i);
    tempobj.setAttribute("scolor",0);
    boxs.push(tempobj);
    }
    focusarray = 0;
    arrmove(0);
    ored.innerText = 0;
    oyellow.innerText = 0;
    oblue.innerText = 0;
    }
    </script>
      

  3.   

    因为一次发送的字数限制 后来把td的属性都写到js里面了减少字数..... 又删了个方法 第一次发的时候忘了测试 再发一个带注释的纯脚本段<script language="javascript">
    var boxs = new Array(); //元素缓存
    var focusarray = 0; //指针
    //数量
    var cred = 0; 
    var cyellow = 0;
    var cblue = 0;
    //数量显示容器
    var ored = document.getElementById("sred");
    var oyellow = document.getElementById("syellow");
    var oblue = document.getElementById("sblue");//按键事件
    function document.onkeypress()
    {
    switch(window.event.keyCode)
    {
    case 45:
    arrmove(-1);break; //"-"
    case 43:
    case 13: //"+" 和 Enter
    arrmove(1);break;
    case 47: //"/"
    if(confirm("重置全部?"))
    for(var i=0;i<boxs.length;i++)
    changeColor(i,0);
    break;
    case 42://"*"
    changeColor(focusarray,0);break;
    case 49://"1"
    changeColor(focusarray,1);break;
    case 50://"2"
    changeColor(focusarray,2);break;
    case 51://"3"
    changeColor(focusarray,3);break;
    default:
    break;
    }
    }
    //方法:改变当前元素的颜色
    function changeColor(index,icolor)
    {
    //当前元素原颜色数量减1
    switch(boxs[index].scolor)
    {
    case 1: cred--;break;
    case 2: cyellow--;break;
    case 3: cblue--;break;
    }
    //新颜色数量加1 并获取新颜色
    switch(icolor)
    {
    case 0: scolor = "";break;
    case 1: scolor = "#FF0000";cred++;break;
    case 2: scolor = "#FFFF00";cyellow++;break;
    case 3: scolor = "#0000FF";cblue++;break;
    }
    boxs[index].scolor = icolor;//记录颜色标记
    boxs[index].bgColor = scolor;//改变颜色
    //显示颜色计数
    ored.innerText = cred;
    oyellow.innerText = cyellow;
    oblue.innerText = cblue;
    }
    //方法 指针移动
    function arrmove(num)
    {
    boxs[focusarray].borderColor = "#999999";//改变前指针所指元素的边框颜色
    focusarray+=num;//改变指针
    //防止溢出
    if(focusarray<0)focusarray+=30;
    if(focusarray>29)focusarray-=30;
    boxs[focusarray].borderColor = "#FF0000";//改变当前指针所指元素的边框颜色
    }function window.onload()
    {
    var tablebox = document.getElementById("table1");
    for(var i=0;i<tablebox.cells.length;i++)
    {
    var tempobj = tablebox.cells[i];
    tempobj.onclick = function(){arrmove(this.boxindex-focusarray);}//添加鼠标单击时事件
    tempobj.style.cursor = "hand";//鼠标指针
    tempobj.align = "center";//对齐
    tempobj.width = 20;//宽
    tempobj.height = 20;//高
    tempobj.borderColor = "#999999";//边框颜色
    tempobj.setAttribute("boxindex",i);//位置标记
    tempobj.setAttribute("scolor",0);//颜色标记
    boxs.push(tempobj);//加入缓存
    }
    focusarray = 0;//指针归零
    arrmove(0);//触发方法
    //显示颜色计数归零
    ored.innerText = 0;
    oyellow.innerText = 0;
    oblue.innerText = 0;
    }
    </script>
      

  4.   

    gzdiablo 大大实现得太完美了，简直就是神仙一样的人物，万分感谢！！！先给您90分，稍后我会再开一个求助帖子，您在帮我看看，完成后有100分，谢谢！！！