可滾動的表格中的鍵盤導航？

介紹試圖從一個XML文件中做出的表：工作表只能說明當時的項目數量有限，所以我做到了滾動：工作我希望能夠在表中導航用鍵盤：工作可滾動的表格中的鍵盤導航？

問題的問題是，去你導航到視覺表底，表不滾動，你導航到非視覺部分。我該如何解決？

<html> 
<head> 
    <script language="javascript" type="text/javascript" src="js/keycode.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script> 

<script> 
var b4 = ""; 
var col = 1; 
var row = 1; 

function bg() { 
    var rc = "r" + row + "c" + col; 
    if (b4 == "") b4 = rc; 
    $("#"+b4).css("backgroundColor",""); 
    $("#div2").text($("#"+rc).css("backgroundColor","yellow").data("param2")); 
    b4 = rc; 
} 

function processKeyDown(e) { 
    var keyCode; 

    if(e.which) { 
     keyCode = e.which; 
    } else { 
     alert("Unknown event type."); 
     return ; 
    } 

    processKeyHandle(keyCode); 

} 

function processKeyHandle(keyCode) { 
    var nc = 0; 
    switch(keyCode) { 
     case VK_LEFT : 
      if (col > 1) col--; 
      bg(); 
      break; 
     case VK_UP : 
      if (row > 1) row--; 
      bg(); 
      break; 
     case VK_RIGHT : 
      if (col < 3) col++; 
      bg(); 
      break; 
     case VK_DOWN : 
      if (row < 10) row++; 
      bg(); 
      break;  
     default : 
      break;  
    } 
} 
</script> 


</head> 


<body onload="bg()" onkeydown="processKeyDown(event);" > 
    <div style="width:325px; height:100px; overflow:auto;"> 

    <script> 
     xmlhttp=new XMLHttpRequest(); 
     xmlhttp.open("GET","xml2.xml",false); 
     xmlhttp.send(); 
     xmlDoc=xmlhttp.responseXML; 
     var item=xmlDoc.getElementsByTagName("item"); 

     var r = 1; 
     var RowCol; 

     document.write("<table id='tab' border='1' width='300px'>"); 
     for (index=0;index<item.length;index++) { 
      document.write("<tr>"); 
       for (index,c=1; index<item.length && c<4; index++,c++) { 
        RowCol = "r" + r + "c" + c; 
        document.write("<td id='" + RowCol + "' data-param1='" + r + "' data-param2='" + RowCol + "'>"); 
         var link = item[index].getElementsByTagName("link")[0].childNodes[0].nodeValue; 
         document.write(link); 
        document.write("</td>"); 
       } 
      document.write("</tr>"); 
      r = r + 1; 
     } 
     document.write("</table>"); 

     </script> 
</div> 




</body> 
</html>

來源

2012-07-31 Dennis Sødal Christensen