從2D Javascript數組創建動態表/網格

Question

我正在嘗試創建一個6x6表格來存儲我正在處理的一個簡單難題的數據，但是我似乎只顯示一個表格行中的所有36個單元，而不是顯示6行的6個單元格。 有人可以在這里發現我在做什么錯嗎？ 對於上下文：B＆W表示藍色和白色，並且數組包含難題的“解決方案”。

 //6x6 array var solutionArray = new Array(6); solutionArray[0] = new Array(6); solutionArray[1] = new Array(6); solutionArray[2] = new Array(6); solutionArray[3] = new Array(6); solutionArray[4] = new Array(6); solutionArray[5] = new Array(6); solutionArray[0][0] = "W"; solutionArray[0][1] = "W"; solutionArray[0][2] = "B"; solutionArray[0][3] = "B"; solutionArray[0][4] = "W"; solutionArray[0][5] = "B"; solutionArray[1][0] = "W"; solutionArray[1][1] = "B"; solutionArray[1][2] = "W"; solutionArray[1][3] = "B"; solutionArray[1][4] = "B"; solutionArray[1][5] = "W"; solutionArray[2][0] = "B"; solutionArray[2][1] = "W"; solutionArray[2][2] = "B"; solutionArray[2][3] = "W"; solutionArray[2][4] = "W"; solutionArray[2][5] = "B"; solutionArray[3][0] = "W"; solutionArray[3][1] = "B"; solutionArray[3][2] = "W"; solutionArray[3][3] = "W"; solutionArray[3][4] = "B"; solutionArray[3][5] = "B"; solutionArray[4][0] = "B"; solutionArray[4][1] = "B"; solutionArray[4][2] = "W"; solutionArray[4][3] = "B"; solutionArray[4][4] = "W"; solutionArray[4][5] = "W"; solutionArray[5][0] = "B"; solutionArray[5][1] = "W"; solutionArray[5][2] = "B"; solutionArray[5][3] = "W"; solutionArray[5][4] = "B"; solutionArray[5][5] = "W"; var x = document.createElement("TABLE"); x.setAttribute("id", "gridTable"); document.body.appendChild(x); for (i = 0; i < solutionArray[i].length; i++) { //output the row tag var y = document.createElement("TR"); y.setAttribute("id", "row"); document.getElementById("gridTable").appendChild(y) for (j = 0; j < solutionArray.length; j++) { ///output the td tag var z = document.createElement("TD"); var t = document.createTextNode(solutionArray[i][j]); z.appendChild(t); document.getElementById("row").appendChild(z); } } 

Answer 1

注意，每行都使用相同的ID。 當您使用document.getElementById它將始終返回具有此ID的第一個節點，因為ID唯一地標識DOM節點。 不建議有多個具有相同ID的DOM節點。

改為這樣做。

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < solutionArray[i].length; i++) {
    //output the row tag
    var y = document.createElement("TR");
    y.setAttribute("id", "row");
    document.getElementById("gridTable").appendChild(y);

    for (j = 0; j < solutionArray.length; j++) {

    ///output the td tag
    var z = document.createElement("TD");
    var t = document.createTextNode(solutionArray[i][j]);
    z.appendChild(t);
   // change document.getElementById("row") by the y variable.
    y.appendChild(z);
  }
}

您可以將document.createElement返回的引用設置為變量，然后對其執行任何操作。