关于网页键盘焦点的问题，急需各位大大帮忙看看

Question

我在做一个页面，需要用到键盘来操作页面  
内容我需要从后台库里导出  
前台页面我每个页面显示6个物件图片，每个图片下面有一个按钮  
怎样才能让键盘焦点在按钮上  
还有下面有“上一页，下一页”的按钮，同样怎么才能用键盘来执行页面  
各位大大来帮我看看  
我看了很多文章，都是静态的页面，动态的页面我找不到相关的内容来学习  
谢谢各位大大比如说下面的代码是我显示产品的，最后面有一个按钮，我每个页面显示6个产品，但是我希望可以用键盘来操作按钮的执行和翻页功能，我看了一些文章，都是静态的功能，有没有可以做成动态的？ 下面是显示的代码 <table width="150" cellpadding=0 cellspacing=0 > 
<tr>  
<td width="" height="" align="center" valign="top"> 
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0> 
                   <TR>  
                     <TD width=152 height=150 bgColor=#ffffff align=center valign="top">  
                       <%if rs("bookpic")="" then  
response.write " <div align=center> <a href=listinfo.asp?id="&rs("bookid")&" > <img src=images/emptybook.gif width=150 height=150 border=0> </a> </div>" 
else%> 
                       <a href=listinfo.asp?id= <%=rs("bookid")%> >  <img src=" <%=trim(rs("bookpic"))%>" width=150 height=150 border=0 align=absmiddle> </a>  
                       <%end if%> 
                     </TD> 
                   </TR> 
               </TABLE> 
</td> 
           </tr> 
           <tr>  
             <td height="" align="center"> <img src="images/ring01.gif" width="9" height="9">  
               <%response.write " <a class=a4 href=listinfo.asp?id="&rs("bookid")&" > <font color=#FF6600>" 
if len(trim(rs("bookname")))>12 then 
response.write left(trim(rs("bookname")),10)&".." 
else 
response.write trim(rs("bookname")) 
end if 
response.write " </font> </a>" 
%> 
               <font color="#999999">  
               <%if len(trim(rs("bookcontent")))>25 then 
response.write left(trim(rs("bookcontent")),25)&"..." 
else 
response.write trim(rs("bookcontent")) 
end if%> 
               </font>  <br> </td> 
           </tr> 
           <tr>  
             <td height="" align="center">规格： <%=rs("isbn")%> <font color="#FF0000"> <%=rs("bookchuban")%> </font> </td> 
           </tr> 
           <tr>  
             <td height="" align="center">价格： <font color="#FF0000"> <strong> <%=rs("huiyuanjia")%> </strong> </font> <font color="#FF0000"> <strong>元 </strong> </font> </td> 
           </tr> 
           <tr>  
             <td height="" align="center"> <a href="cart.asp?id= <%=rs("bookid")%>&action=add"> <img src="images/shopcart2.gif" width="71" height="21" border=0> </a>  
             </td> 
           </tr> 
</table> 下面是我修改的键盘超作的代码，但是怎么才能应用到上面去 <style>   
#chaborder td{   
 width:93px;height:43px;text-align:center   
}   
#chaborder a{   
  display:block; width:93px;height:43px;OVERFLOW: hidden; cursor:default;   
}   
#chaborder a:hover{width:89px;height:40px;border:1px solid #f00}   
#chaborder img{border:0}   
.ahover{width:89px;height:40px;border:1px solid #f00}  
.aout{display:block; width:93px;height:43px;OVERFLOW: hidden; cursor:default; }  
body {   
background-color: #ffffff;   
}   
</style> 
<script type="text/javascript">  
    function MoveCursor(obj){  
        var row = parseInt(obj.id.substring(1,2));  
        var col = parseInt(obj.id.substring(2,3));  
        switch(event.keyCode){  
            case 37:  
                if(col > 1)  
                    col--;  
                break;  
            case 38:  
                if(row > 1)  
                    row--;  
                break;  
            case 39:  
                if(col   < 3)  
                    col++;  
                break;  
            case 40:  
                if(row   < 3)  
                    row++;  
                break;  
case 65: 
window.location="/shopping/test/gw.asp"; 
break; 
        }  
        obj = document.getElementById("a" + row.toString() + col.toString());  
        //obj.click();  
        obj.focus();  
        obj.className = "ahover";  
        status = obj.innerText;  
    }  
</script> 谢谢各位大大帮忙看下

Answer 1

但是我希望可以用键盘来操作按钮的执行和翻页功能
------
看不明白.....你意思是使用方向键控制表格中的单元格中连接的选择?设置连接的样式??别发有<%%>的代码,发运行过后生成的html代码

Answer 2

我希望有个象选取框一样的方框在每个连接的上面，这样我移动键盘上下左右键我可以看到我移动在哪个物品上，然后点回车键来执行连接，我同样的道理，我还想设置几个快捷键在下面翻页中，比如我按A键是下一页，B键是上一页，谢谢大大帮忙看看，下面是我运行后的代码
<table width="800" height="500" align="center" valign="top" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="800" height=""  border="0" cellpadding="0" cellspacing="0">
<tr valign="top"> <td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=53 > </a> </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=53 ><font color=#FF6600>雀巢美禄饮品</font></a> 
                    <font color="#999999">&nbsp; </font><br></td>
          </tr>
          <tr> 
            <td height="" align="center"><a href="cart.asp?id=53&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> 
            </td>
          </tr>
</table>
</div>
</td><td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=52 > </a> </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=52 ><font color=#FF6600>好丽友好有趣薯片</font></a> 
                    <font color="#999999">&nbsp; </font> </td>
                </tr>
          <tr> <td height="" align="center"><a href="cart.asp?id=52&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> </td></tr></table></div></td>
<td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> <td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=51 > </a> </TD>
                  </TR></TABLE></td>
          </tr><tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=51 ><font color=#FF6600>乐事波乐薯片原味</font></a> 
                    <font color="#999999">&nbsp; </font></td>
                </tr>
          <tr> <td height="" align="center"><a href="cart.asp?id=51&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> </td></tr>
</table>
</div>
</td></tr>
  
<tr><td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=50 > </a> </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=50 ><font color=#FF6600>乐事天然薯片</font></a></td>
          </tr>
          <tr> 
            <td height="" align="center"><a href="cart.asp?id=50&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> 
            </td>
          </tr>
</table>
</div>
</td><td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=49 > </a> </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=49 ><font color=#FF6600>达能王子曲奇星饼干</font></a> 
                    <font color="#999999">&nbsp; </font> </td>
                </tr>
          <tr> 
            <td height="" align="center"><a href="cart.asp?id=49&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> 
            </td>
          </tr>
</table>
</div>
</td><td width="" height="" align="left" bgcolor="#FFFFFF" valign="top">
<div align="center">
<table width="150" cellpadding=0 cellspacing=0 >
<tr> 
<td width="" height="" align="center" valign="top">
<TABLE onmouseover="this.style.backgroundColor='#FF6600'" onmouseout="this.style.backgroundColor=''" width=150 height=150 cellSpacing=1 cellPadding=2 bgColor=#e1e1e1 border=0>
                  <TR> 
                        <TD width=152 height=150 bgColor=#ffffff align=center valign="top"> 
                          <a href=listinfo.asp?id=48 > </a> </TD>
                  </TR>
              </TABLE>
</td>
          </tr>
          <tr> 
                  <td height="" align="center"> <a class=a4 href=listinfo.asp?id=48 ><font color=#FF6600>太平梳打奶盐口味</font></a> 
                    <font color="#999999">&nbsp; </font></td>
          </tr>
          <tr> 
            <td height="" align="center"><a href="cart.asp?id=48&action=add"><img src="images/shopcart2.gif" width="71" height="21" border=0></a> 
            </td>
          </tr>
</table>
</div>
</td></tr>
  
<tr></tr>
</table>
<table border=0 align=center>
<form method=get onsubmit="document.location = 'http://192.168.1.101:8080/shop/productshow.asp?id=big&anid=16&Page='+ this.page.value;return false;"><TR>
<TD align=right>
<p align=center>
首页 
上页 
下页 
尾页 
 页次：1/1页
 共有6种商品
</TD>
</TR></form>
</table>
</td>
</tr>
</table>

Answer 3

根据你给的代码大致写了一个,注意你的table标签的结构不要变,一变代码就错误了发更改过的------加了个样式,更改了导航的一些html,给其中一个table加一个id
<script>
//使用键盘控制上下页翻滚，你给a加个id就可以，具体代码看我帮你改的导航........
var rowIndex=-1,colIndex=-1,MaxRow=2,MaxCell=3;
var LinkUrl="";
document.onkeydown=function(e)
{
  var TempRowIndex=rowIndex,TempColIndex=colIndex;//获取上次的下标
  e=e||event;
  switch(e.keyCode)
  {
    case 65://A
      var aNext=document.getElementById("aNext");//获取下一页的a标签
      if(aNext&&aNext.href) location=aNext.href;
      return;
    case 66://B
      var aPre=document.getElementById("aPre");//获取上一页的a标签
      if(aPre&&aPre.href)location=aPre.href;
      return;
    case 13://Enter
      if(LinkUrl!="")location=LinkUrl;
      return;//注意是return，停止执行下面的代码
    case 37://左
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(colIndex>=0) colIndex--;
        if(colIndex<0) colIndex=MaxCell-1;
      }
      break;
    case 38://上
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(rowIndex>=0)rowIndex--;
        if(rowIndex<0)rowIndex=MaxRow-1;
       }
      break; 
    case 39://右
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(colIndex<MaxCell) colIndex++;
        if(colIndex>=MaxCell) colIndex=0;
      }
      break; 
    case 40://下
      if(rowIndex==-1)//没有选择
      {
        rowIndex=0;colIndex=0;
      }
      else
      {
        if(rowIndex<MaxRow)rowIndex++;
        if(rowIndex>=MaxRow)rowIndex=0;
       }
      break;      
  }
  var FoucsTbs,PreFocusTbs,a;
  var tbList=document.getElementById("tbList");
  if(TempColIndex!=-1)
  {
    PreFocusTbs=tbList.rows[TempRowIndex].cells[TempColIndex].getElementsByTagName("table");//获取上次获取焦点的表格
    PreFocusTbs[1].style.backgroundColor='';
    //清除上次链接的样式
    a=PreFocusTbs[0].rows[1].cells[0].getElementsByTagName("a")[0];
    a.className="";
  }  
  FoucsTbs=tbList.rows[rowIndex].cells[colIndex].getElementsByTagName("table");//获取当前获取焦点的表格
  FoucsTbs[1].style.backgroundColor='#ff6600';
  //设置链接获取焦点
  a=FoucsTbs[0].rows[1].cells[0].getElementsByTagName("a")[0];
  a.className="bold";
  LinkUrl=a.href;//获取url，如果按下enter时更改location对象
}
</script>
<style>
a.bold{font-weight:bold;}
</style>
<table width="800" height="500" align="center" valign="top" cellpadding="0" cellspacing="0"> 
<tr> 
<td valign="top"> 
<!------给这个talbe加了个id------->
<table width="800" height=""  border="0" cellpadding="0" cellspacing="0" id="tbList"> 
<tr valign="top"> 
<td width="" height="" align="left" bgcolor="#FFFFFF" valign="top"> 
<div align="center"> 
<table width="150" cellpadding=0 cellspacing=0 > 
<tr>  
<!-----原来的代码--------><TR> 
<TD align=right> 
<p align=center> 
首页  
<a href="?page=2" id="aPre">上页</a>  
<a href="?page=3" id="aNext">下页  </a>
尾页  
 页次：1/1页 
 共有6种商品 
</TD> 
</TR> </form> 
</table> 
</td> 
</tr> 
</table>