使用焦点设置表格的第一个单元格的HTML/JavaScript的

我有表3X4细胞则使用箭头键细胞间我导航（左，右，上，下），但问题是，一开始我需要按Tab键获得焦点第一个单元格，然后才能使用箭头键导航。现在我的问题是我如何设置焦点到表格的第一个单元格，以便我可以直接使用箭头键进行导航，而不是先使用选项卡，然后使用箭头键。使用焦点设置表格的第一个单元格的HTML/JavaScript的

这里是我的代码：

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(); 
    }

好心的帮助。

来源

2011-01-05 rashmi

在页面加载时，检索对该单元格的引用并在其上调用focus。您还没有表现出您的标记，所以很难给你一个具体的例子，但例如，如果你的表中有“富”的id：

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显然不在你的系统上。
您正试图在创建元素之前访问元素。您的第一行脚本代码会立即发生，但由于脚本高于该文件中的表，因此该元素不存在而失败。
您的选择器正在选择表格单元;我猜你实际上想要按钮。

另外：

第二和第三button标记未关闭。浏览器可能会为你静静地关闭它们，但调试这类问题的第一步就是确保你的标记是正确的，并且valid。有效的标记有所作为。
路径“C：\ Documents and Settings \ ing12732 \ Desktop \ html_files \ tv-dev \ image2。PNG”，并在button标签中的图像等等指示我，你正在试图做Web开发，而无需使用Web服务器。强烈建议使用一个Web服务器和正确的路径，浏览器做各种事情有不同的处理时，本地文件，而不是资源通过HTTP加载。
强烈建议使用DOCTYPE，任何DOCTYPE，虽然我的首选之一就是HTML5的<!DOCTYPE html>（more）。

Here's a corrected fiddle.希望这有助于。

来源

2011-01-05 07:06:23

非常感谢你为了你LP。你能告诉我如何jQuery的库可以用于 – rashmi 2011-01-05 07:43:52

@rashmi：看看上面的内容jQuery的链接。有很多例子和文档。 – 2011-01-05 07:50:30

非常感谢你的帮助。你能告诉我如何jQuery的库可以使用此链接http://www.jsfiddle.net/jAxg9/26/使用jQuery其实我也试过，但不能将焦点设置到第一个单元格。请告诉我在哪里我错了 – rashmi 2011-01-05 08:09:08

使用焦点设置表格的第一个单元格的HTML/JavaScript的

回答

相关问题