滚动表中的键盘导航?

问题描述 投票:0回答:1

介绍 试图从xml文件创建一个表:Works该表只能显示当时有限数量的项目,所以我使它可滚动: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>
javascript html-table
1个回答
0
投票

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

有关计算样式的信息,请检查quirksmode,如何滚动MDN总是一个不错的去处。

© www.soinside.com 2019 - 2024. All rights reserved.