Question

简介
尝试从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>

Answer 1

您需要检查聚焦元素的计算样式并滚动页面以使其进入可见区域。

有关计算样式的信息，请检查quirksmode，因为如何滚动MDN总是一个不错的选择。

滚动表中的键盘导航？

1 个答案: