Javascript：使用按钮导航表

我很难弄明白这一点。我已经创建了一个表，我想使用可点击按钮（而不是箭头键）在每个单元格中导航，并将该单元格标记为黄色。表格将生成，我可以向下导航，但不能向上导航。有没有一种更简单的方法可以通过可点击的按钮浏览表格。我花了太多的时间来弄明白这一点，我真的不愿意承认

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

编辑2：修复了单元格未标记的问题。按钮正确地向下和向上移动，但向上移动进入标题行，我不想这样做。还是不知道该怎么走。我更新了pastebin链接

编辑3：我现在似乎已经开始工作了。添加JSIDLE链接：

函数构建表（）{
var newTable=document.createElement（“表”）；
//变量I=行
//Var J=列
对于（变量i=0；i<4；i++）{
var tr=document.createElement（'tr'）；
对于（var j=0；j<4；j++）{
var td=document.createElement（'td'）；
如果（i==0&&j！=4）{
td.appendChild（document.createTextNode（“头”））
td.appendChild（document.createTextNode（（j+1）））
tr.D.儿童（td）
}
否则{
td.appendChild（document.createTextNode（i））
td.appendChild（document.createTextNode（“，”））
td.appendChild（document.createTextNode（（j+1）））
tr.D.儿童（td）
}
}
newTable.appendChild（tr）；
}
document.getElementById（“tableHere”）.appendChild（newTable）；
newTable.setAttribute（“边框”，3）；
newTable.style.width='50%'；
返回newTable；
}

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

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

---

希望这能有所帮助。

我已经编写了一个示例，说明如何使用jQuery-

这是一个非常简单的函数

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

---

我认为这超出了任务范围。我们应该使用DOM并通过DOM导航到元素。您仍然使用此方法，但将JQuery替换为DOM函数，例如：。我的建议是使用jQuery，更简单，你会给你的导师留下深刻的印象：）我来试试，看看效果如何。

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