Javascript：使用按钮导航表格答案

【问题标题】：Javascript: Using Buttons to navigate a tableJavascript：使用按钮导航表格
【发布时间】：2015-11-02 22:56:37
【问题描述】：

我无法弄清楚这一点。我创建了一个表格，我想使用可点击按钮（而不是箭头键）来浏览每个单元格并将该单元格标记为黄色。表格建立起来，我可以向下导航，但不能向上导航。有没有更简单的方法来使用可点击按钮遍历表格。我花了太多时间来弄清楚这一点，我真的很想承认。

编辑：我们应该使用并通过 DOM 导航到元素。

edit 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;
}

【问题讨论】：

标签： javascript dom button

【解决方案1】：

为什么不为每个单元格的位置分配一个特定的值（可以是属性的形式）？所以每个单元格都会有一个 X 和 Y 值。然后，您将保留一个存储当前 X 和 Y 值的变量。按下箭头键后，您可以使用 jQuery 选择具有所需 X 和 Y 值的单元格，因此向上按钮将是： (X, Y+1) ，向下按钮 (X, Y-1) ，左（X-1，Y），右（X+1，Y）。

在这种情况下，最好对最小/最大 X 和 Y 值进行验证。

希望这会有所帮助。

【讨论】：

我认为这超出了作业的范围。我们应该使用并通过 DOM 导航到元素。
您仍然使用此方法，但将 JQuery 替换为 DOM 函数，例如：w3schools.com/jsref/met_element_getattribute.asp。我的建议是使用 jQuery，更简单，你会打动你的导师 :)
我会试一试，看看效果如何。

【解决方案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;
   }
});

【讨论】：