介绍 试图从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>
您需要检查聚焦元素的计算样式并滚动页面以使其进入可见区域。
有关计算样式的信息,请检查quirksmode,如何滚动MDN总是一个不错的去处。