使用 html/javascript 将焦点设置到表格的第一个单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4601564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setting focus to first cell of table using html/javascript
提问by rashmi
i have table with 3X4 cells i navigate among cells using arrow keys(right,left,up, down) but problem is initially i need to press tab key to get focus to first cell and only after that i will be able to use arrow key to navigate. now my question is how can i set focus to first cell of table so that i can directly use arrow keys to navigate instead use tab first and they arrow keys.
我有一个包含 3X4 单元格的表格，我使用箭头键（右、左、上、下）在单元格之间导航，但问题是最初我需要按 Tab 键才能获得第一个单元格的焦点，只有在此之后我才能使用箭头键导航。现在我的问题是如何将焦点设置到表格的第一个单元格，以便我可以直接使用箭头键进行导航，而不是先使用 Tab 键，然后使用它们的箭头键。
here is my code:
这是我的代码：
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();
}
kindly help.
请帮助。
采纳答案by T.J. Crowder
On page load, retrieve a reference to that cell and call focuson it. You haven't shown your markup, so it's hard to give you a concrete example, but for instance if your table has an idof "foo":
在页面加载时，检索对该单元格的引用并调用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;
}
In terms of "page load", you can either hook the window.onloadevent (but that happens verylate), or just put a script element at the bottom of the bodytag (or anywhere after the table) that does the above. Once the tabletag is closed, you can access it from script (ref1, ref2).
就“页面加载”而言，您可以挂钩window.onload事件（但发生得很晚），或者只是在body标签底部（或表格之后的任何位置）放置一个脚本元素来执行上述操作。一旦table标签被关闭，你可以从脚本（访问REF1，REF2）。
Off-topic: If you use a library like jQuery, Prototype, YUI, Closure, or any of several others, the code can get a lot simpler. For instance, with jQuery, the above changes to:
题外话：如果您使用jQuery、Prototype、YUI、Closure或其他几个库之类的库，则代码会变得更加简单。例如，使用 jQuery，上述更改为：
$("#foo td:first").focus();
Update: Responding to your comment below, your jsFiddle code was:
更新：响应您在下面的评论，您的 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>
Three issues prevented that fiddle from working:
三个问题阻止了这个小提琴的工作：
- You weren't successfully including jquery. On your system, the path
jquery-1.4.4.jsmay give you jQuery, but jsFiddle is obviously not on your system. - You're trying to access an element before it's been created. Your first line of script code happens right away, but since the script is abovethe table in the file, it fails because the element isn't there.
- Your selector is selecting the table cell; I'm guessing you actually want the button.
- 您没有成功包含 jquery。在您的系统上，路径
jquery-1.4.4.js可能会给您 jQuery，但 jsFiddle 显然不在您的系统上。 - 您试图在创建元素之前访问它。您的第一行脚本代码立即发生，但由于脚本位于文件中的表格上方，因此它失败了，因为该元素不存在。
- 您的选择器正在选择表格单元格；我猜你真的想要按钮。
Separately:
分别地：
- The second and third
buttontags weren't closed. The browser probably quietly closes them for you, but one of the first steps in debugging this sort of thign is to make sure your markup is correct and valid. Valid markup make a difference. - The paths "C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" and the like in the images inside the
buttontags indicate to me that you're trying to do web development without using a web server. Stronglyrecommend using a web server and proper paths, browsers do various things differently when dealing with local files rather than resources loaded via HTTP. - Strongly recommend using a
DOCTYPE. AnyDOCTYPE, although my preferred one is HTML5's<!DOCTYPE html>(more).
- 第二个和第三个
button标签没有关闭。浏览器可能会悄悄地为您关闭它们，但调试此类 thign 的第一步是确保您的标记正确有效。有效的标记会有所作为。 button标签内图像中的路径“C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png”等向我表明您正在尝试在不使用 Web 服务器的情况下进行 Web 开发. 强烈建议使用 Web 服务器和正确的路径，浏览器在处理本地文件而不是通过 HTTP 加载的资源时会做不同的事情。- 强烈建议使用
DOCTYPE. AnyDOCTYPE，尽管我最喜欢的是 HTML5<!DOCTYPE html>（更多）。
Here's a corrected fiddle.Hope this helps.
这是一个更正的小提琴。希望这可以帮助。
