使用焦點設置表格的第一個單元格的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的

回答

相關問題