2D Javascriptの配列から動的テーブル/グリッドを作成する

Question

私が作業している単純なパズルのデータを格納する6x6テーブルを作成しようとしていますが、6行6行を表示するのではなく、 1つのテーブル行内に36個のセルがすべて出力されます。誰でも私がここで間違っていることに気付くことができますか？コンテキストの場合：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はDOMノードを一意に識別するため、常にこのIDを持つ最初のノードを返します。同じ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によって返された参照を設定し、あなたがそれでやりたいことができます。