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）。

在这种情况下，最好对最小/最大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;
   }
});

Javascript：使用按钮导航表格

2 个答案: