2D 자바 스크립트 배열에서 동적 테이블/그리드 만들기

Question

간단한 퍼즐을위한 데이터를 저장하기 위해 6x6 테이블을 만들려고하는데, 6 셀 6 행을 표시하는 대신 보일 수 있습니다. 출력은 단일 테이블 행 내에서 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에 의해 반환되는 참조를 설정하고 당신이 그것으로 원하는 건 뭐든지 할 수 있습니다.