Javascript: Использование кнопок для перемещения по таблице

Question

У меня возникли проблемы с этим. Я создал таблицу, и я хочу использовать кнопки с кнопками (а не клавиши со стрелками), чтобы перемещаться по каждой ячейке и отмечать ее как желтую. Стол строит, и я могу перемещаться вниз, но не вверх. Есть ли более простой способ передвижения по столу с помощью кнопок, которые можно щелкнуть. Я потратил слишком много времени на то, чтобы понять это, чтобы действительно признаться.

Редактировать: Мы должны использовать и перемещаться по 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; 
} 

Answer 1

Почему бы не назначить конкретное значение (может быть в виде атрибутов) для позиции каждой ячейки? Таким образом, каждая ячейка будет иметь значение X и Y. Затем вы сохраните переменную, сохраняющую текущие значения X и Y. После нажатия клавиши со стрелкой вы можете использовать jQuery для выбора ячейки с требуемыми значениями X и Y, поэтому для кнопки Up, которая будет: (X, Y + 1), кнопка «Вниз» (X, Y-1), Левый (X-1, Y), правый (X + 1, Y).

В этом случае было бы неплохо использовать проверку значений min/max X и Y.

Надеюсь, это поможет.

Answer 2

Я написал пример того, как сделать это с помощью 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; 
    } 
});