使用html/javascript将焦点设置到表格的第一个单元格
使用html/javascript将焦点设置到表格的第一个单元格
提问于 2011-01-05 14:57:20
我有一个包含3X4个单元格的表格，我使用箭头键(右、左、上、下)在单元格之间导航，但问题是最初我需要按Tab键才能将焦点转移到第一个单元格，之后才能使用箭头键导航。现在我的问题是如何将焦点设置到表格的第一个单元格，以便我可以直接使用箭头键来导航，而不是先使用制表符和他们的箭头键。
下面是我的代码：
function myNav(e,down,left,up,right)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
selectArrowKey = left;
break;
case 38:
selectArrowKey = down;
break;
case 39:
selectArrowKey = right;
break;
case 40:
selectArrowKey = up;
break;
}
if (!selectArrowKey) return;
var controls = document.getElementsByName(selectArrowKey);
if (!controls) return;
if (controls.length != 1) return;
controls[0].focus();
} 请帮帮忙。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-01-05 15:06:23
在页面加载时，检索对该单元格的引用并对其调用focus。您还没有展示您的标记，所以很难给出一个具体的示例，但是例如，如果您的表的id为"foo"：
var node = findFirstChild(document.getElementById('foo'), 'TD');
if (node) {
// get the control within the cell
node.focus();
}
function findFirstChild(parent, tag) {
var node, child;
for (node = parent.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 1) { // Element
if (node.tagName === tag) {
return node;
}
child = findFirstChild(node, tag);
if (child) {
return child;
}
}
}
return undefined;
}就“页面加载”而言，您可以挂钩window.onload事件(但这发生得很晚)，或者只是在body标记的底部(或表之后的任何地方)放置一个脚本元素来执行上述操作。关闭table标记后，您可以从脚本(ref1、ref2)访问它。
离题：如果使用像jQuery、Prototype、YUI、Closure或any of several others这样的库，代码会变得简单得多。例如，使用jQuery时，上述更改为：
$("#foo td:first").focus();更新：响应您下面的评论，您的jsFiddle代码为：
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$("#mycell td:first").focus();
function myTest(e,down,left,up,right)
{
if (!e) e=window.event;
var selectArrowKey;
switch(e.keyCode)
{
case 37:
// Key links.
selectArrowKey = left;
break;
case 38:
// Key oben.
selectArrowKey = down;
break;
case 39:
// Key rechts.
selectArrowKey = right;
break;
case 40:
// Key unten.
selectArrowKey = up;
break;
}
if (!selectArrowKey) return;
var controls = document.getElementsByName(selectArrowKey);
if (!controls) return;
if (controls.length != 1) return;
controls[0].focus();
}
var node = findFirstChild(document.getElementById('mycell'), 'TD');
if (node) {
// get the control within the cell
node.focus();
}
function findFirstChild(parent, tag) {
var node, child;
for (node = parent.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 1) { // Element
if (node.tagName === tag) {
return node;
}
child = findFirstChild(node, tag);
if (child) {
return child;
}
}
}
return undefined;
}
</script>
</head>
<body>
<table id="mycell" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><button name="obenLinks" onkeydown="myTest(event,undefined,undefined,'mitteLinks','obenMitte')"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></button></td>
<td><button name="obenMitte" onkeydown="myTest(event,undefined,'obenLinks','mitteMitte','obenRechts')"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></td>
<td><button name="obenRechts" onkeydown="myTest(event,undefined,'obenMitte','mitteRechts',undefined)"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></td>
</tr>
</table>
</body>
</html>有三个问题阻碍了这把小提琴的工作：
- 你没有成功地包含jquery。在您的系统上，路径
jquery-1.4.4.js可能会为您提供jQuery，但是在创建元素之前，jsFiddle显然不在您的path上尝试访问元素。第一行脚本代码立即出现，但由于脚本位于文件中表的上方，因此它会失败，因为元素不在那里。 - 您的选择器正在选择表格单元格；我猜您实际上想要该按钮。
单独：
- 第二个和第三个
button标签没有结束。浏览器可能会悄悄地为你关闭它们，但调试这类协议的第一步是确保你的标记是正确的和valid的。有效的标记生成web路径"C:\Documents和Settings\ing12732\Desktop\html_files\tv-dev\image2.png“等在button标记内的图像中向我表明您正在尝试在不使用web服务器的情况下进行web开发。强烈建议使用web服务器和正确的路径，浏览器在处理本地文件而不是通过HTTP. - Strongly加载的资源时会做各种不同的事情。建议使用
DOCTYPE。任何DOCTYPE，尽管我更喜欢的是html5的<!DOCTYPE html>(more).
。
Here's a corrected fiddle.希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4601564
复制相关文章
相似问题
腾讯云开发者
