Javascript 可滚动表格中的键盘导航？_Javascript_Html Table

Javascript 可滚动表格中的键盘导航？

javascript

Javascript 可滚动表格中的键盘导航？,javascript,html-table,Javascript,Html Table,简介尝试从xml文件生成表：有效该表当时只能显示有限数量的项目，因此我将其设置为可滚动：Works 我希望能够使用键盘在表格中导航：Works 问题问题是，如果导航到可视表格的底部，表格不会滚动，而导航到非可视部分。我该如何解决这个问题 <html> <head> <script language="javascript" type="text/javascript" src="js/keycode.js"></script>

简介
尝试从xml文件生成表：有效该表当时只能显示有限数量的项目，因此我将其设置为可滚动：Works
我希望能够使用键盘在表格中导航：Works

问题
问题是，如果导航到可视表格的底部，表格不会滚动，而导航到非可视部分。我该如何解决这个问题

<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>


var b4=“”；
var-col=1；
var行=1；
函数bg（）{
var rc=“r”+行+“c”+列；
如果（b4==“”）b4=rc；
$（“#”+b4）.css（“backgroundColor”，”）；
$（“#div2”）.text（$（“#”+rc）.css（“背景色”、“黄色”）.data（“参数2”）；
b4=rc；
}
函数processKeyDown（e）{
var键码；
如果（e.which）{
keyCode=e.which；
}否则{
警报（“未知事件类型”）；
返回；
}
processKeyHandle（keyCode）；
}
函数processKeyHandle（keyCode）{
var-nc=0；
开关（钥匙代码）{
案例VK_左：
如果（列>1）列--；
bg（）；
打破
案例VK_UP：
如果（行>1）行--；
bg（）；
打破
案例VK_右：
if（col<3）col++；
bg（）；
打破
案例VK_下降：
如果（第10行）第++；
bg（）；
打破
违约：
打破
}
}
xmlhttp=新的XMLHttpRequest（）；
open（“GET”，“xml2.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var item=xmlDoc.getElementsByTagName（“item”）；
var r=1；
var RowCol；
文件。填写（“”）；
对于（index=0；index，您需要检查聚焦元素的计算样式，并滚动页面，使其进入可见区域
有关计算样式的信息，请检查，因为如何滚动始终是一个不错的选择。
我也将代码放在这里：无法使html/脚本的拆分工作正常进行。