使用html/javascript将焦点设置为表的第一个单元格_Javascript_Html

使用html/javascript将焦点设置为表的第一个单元格

javascript html

使用html/javascript将焦点设置为表的第一个单元格,javascript,html,Javascript,Html,我有一个包含3X4个单元格的表格，我使用箭头键（右、左、上、下）在单元格之间导航，但问题是，最初我需要按tab键将焦点移到第一个单元格，然后才能使用箭头键导航。现在我的问题是如何将焦点设置为表的第一个单元格，以便直接使用箭头键导航，而不是使用tab first和箭头键这是我的密码： function myNav(e,down,left,up,right) { if (!e) e=window.event; var selectArrowKey; switch(e.

我有一个包含3X4个单元格的表格，我使用箭头键（右、左、上、下）在单元格之间导航，但问题是，最初我需要按tab键将焦点移到第一个单元格，然后才能使用箭头键导航。现在我的问题是如何将焦点设置为表的第一个单元格，以便直接使用箭头键导航，而不是使用tab first和箭头键

这是我的密码：

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

请提供帮助。

在页面加载时，检索对该单元格的引用，并对其调用

focus

。您尚未显示标记，因此很难给出具体示例，但例如，如果您的表具有

id

的“foo”：

就“页面加载”而言，您可以钩住

window.onload

事件（但这种情况发生得很晚），也可以在执行上述操作的

body

标记的底部（或表后面的任何位置）放置一个脚本元素。关闭

表

标记后，可以从脚本（，）访问它

主题外：如果使用诸如、或之类的库，代码可能会简单得多。例如，对于jQuery，上述更改为：

$("#foo td:first").focus();

更新：回应您下面的评论，您的JSFIDLE代码是：

<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>


$（“mycell td:first”）.focus（）；
功能测试（e、下、左、上、右）
{
如果（！e）e=window.event；
var选择箭头键；
开关（如钥匙代码）
{
案例37：
//关键环节。
选择箭头键=左；
打破
案例38：
//基奥本。
选择箭头键=向下；
打破
案例39：
//按键记录。
选择箭头键=右；
打破
案例40：
//钥匙未扣。
选择箭头键=向上；
打破
}
如果（！selectArrowKey）返回；
var controls=document.getElementsByName（选择箭头键）；
如果（！controls）返回；
如果（controls.length！=1）返回；
控件[0]。焦点（）；
}
var node=findFirstChild（document.getElementById（'mycell'），'TD'）；
如果（节点）{
//获取单元格内的控件
node.focus（）；
}
函数findFirstChild（父级，标记）{
var节点，子节点；
for（node=parent.firstChild；node；node=node.nextSibling）{
如果（node.nodeType==1）{//元素
if（node.tagName==标记）{
返回节点；
}
child=findFirstChild（节点，标记）；
如果（儿童）{
返回儿童；
}
}
}
返回未定义；
}

有三个问题妨碍了小提琴的工作：

您没有成功地包括jquery。在您的系统上，路径

jquery-1.4.4.js

可能会为您提供jquery，但是jsFiddle显然不在您的系统上

您正在尝试在创建元素之前访问它。您的第一行脚本代码立即发生，但由于脚本位于文件中的表上方，因此由于元素不在那里，因此失败

选择器正在选择表格单元格；我猜你真的想要这个按钮

分别：

第二个和第三个

按钮

标记未关闭。浏览器可能会悄悄地为您关闭它们，但是调试这种东西的第一步是确保您的标记是正确的和正确的。有效的标记会有所不同

按钮

标记内图像中的路径“C:\Documents and Settings\ing12732\Desktop\html\U files\tv dev\image2.png”等向我表明，您试图在不使用web服务器的情况下进行web开发strong建议使用web服务器和正确的路径，浏览器在处理本地文件而不是通过HTTP加载的资源时，会以不同的方式执行各种操作

强烈建议使用

DOCTYPE

。任何

DOCTYPE

，尽管我更喜欢HTML5的

（）

希望这能有所帮助。

在页面加载时，检索对该单元格的引用，并调用

focus