Javascript：使用按鈕導航表格

我無法解決這個問題。我創建了一個表格，我想使用可點擊的按鈕（而不是箭頭鍵）來瀏覽每個單元格，並將該單元格標記爲黃色。桌子建立了，我可以向下導航，但不能起來。用可點擊的按鈕是否有更簡單的方法來遍歷表格？我花了太多時間研究這個真正關心承認的事情。Javascript：使用按鈕導航表格

編輯：我們應該使用並瀏覽DOM到元素。

編輯2：修正了單元格未標記的問題。按鈕正確地遍歷向上和向上，但UP進入我不婉轉的標題行。仍然無法弄清楚向右/向左。我更新了pastebin鏈接。

編輯3：我現在似乎已經開始工作了。添加的jsfiddle鏈接：http://jsfiddle.net/rq3tjpu1/

function buildTable() { 

var newTable = document.createElement("table"); 


//Var I = Rows 
//Var J = columns 
for (var i = 0; i < 4; i++) { 
    var tr = document.createElement('tr'); 

    for (var j = 0; j < 4; j++) { 
     var td = document.createElement('td'); 

     if (i == 0 && j != 4){ 
      td.appendChild(document.createTextNode("Header ")) 
      td.appendChild(document.createTextNode((j+1))) 
      tr.appendChild(td) 

     } 

     else { 
      td.appendChild(document.createTextNode(i)) 
      td.appendChild(document.createTextNode(", ")) 
      td.appendChild(document.createTextNode((j+1))) 
      tr.appendChild(td) 
     } 


    } 

    newTable.appendChild(tr); 
} 

document.getElementById("tableHere").appendChild(newTable); 
newTable.setAttribute("border", 3); 
newTable.style.width = '50%'; 
return newTable; 
}

來源

2015-11-02 shelum

爲什麼不分配一個特定的值（可以在屬性的形式），爲每個單元的位置？所以每個單元格都會有一個X和Y值。然後你會保存一個變量存儲當前的X和Y值。一旦箭頭鍵被按下，您可以使用jQuery選擇具有所需的X和Y值的單元格，因此對於Up按鈕（X，Y + 1），下按鈕（X，Y-1），左（X-1，Y），右（X + 1，Y）。

在這種情況下，使用最小/最大X和Y值驗證是一個好主意。

希望這會有所幫助。

來源

2015-11-02 23:09:04 numX

我認爲這超出了分配的範圍。我們應該使用並瀏覽DOM到元素。 – shelum

您仍然使用此方法，但用DOM函數替換JQuery，例如：http://www.w3schools.com/jsref/met_element_getattribute.asp。我的建議是使用jQuery，更簡單，你會打動你的導師:) – numX

我會給它一個鏡頭，看看它是怎麼回事。 – shelum

我寫了一個例子，如何做到這一點使用jQuery - http://jsfiddle.net/rq3tjpu1/

這是一個非常簡單的功能

$("button").click(function() { 
    var cell = $(".activeCell"); 
    var rowIndex = cell.parent().index(); 
    var colIndex = cell.index(); 
    switch ($(this).html()) { 
     case "UP": 
      if (rowIndex == 1) 
      alert("already top"); 
     else 
      cell.removeClass("activeCell").parent().prev().find("td:eq(" + colIndex + ")").addClass("activeCell"); 
     break; 
     case "DOWN": 
     if (rowIndex == cell.parents("table").find("tr").length-1) 
      alert("already bottom"); 
     else 
      cell.removeClass("activeCell").parent().next().find("td:eq(" + colIndex + ")").addClass("activeCell"); 
     break; 
     case "RIGHT": 
      if (colIndex == cell.parent().find("td").length-1) 
       alert("already at the right side"); 
      else 
       cell.removeClass("activeCell").next().addClass("activeCell"); 
     break; 
     case "LEFT": 
      if (colIndex == 0) 
       alert("already at the left side"); 
      else 
       cell.removeClass("activeCell").prev().addClass("activeCell"); 
     break; 
    } 
});

來源

2015-11-02 23:29:03

Javascript：使用按鈕導航表格

回答

相關問題