행을 반복하는 테이블을 가져올 수 없습니다.

Question

저는이 스크립트가 정말 바보 같아서 새로운 스크립트입니다 ...하지만 왜 새 테이블 행을 세로로 배치 할 수 있는지 알 수 없습니다. 이 코드는 모든 새 행을 첫 번째 행과 수평으로 추가하는 것으로 보입니다.

function genGameGrid(){ 
var rows=10, columns=10; 
var x = document.createElement("TABLE"); 
x.setAttribute("id", "myTable"); 
document.body.appendChild(x); 

    for(var i=0;i<=rows;i++){ 
     var y = document.createElement("TR"); 
     y.setAttribute("id", "myTr", i); 
     document.getElementById("myTable").appendChild(y); 
     for(var j=0;j<=columns;j++){ 
      var z = document.createElement("TD"); 
      var t = document.createTextNode(j); 
      z.appendChild(t); 
      document.getElementById("myTr").appendChild(z); 
     } 
    } 
} 

저는 var y의 속성을 설정하는 것과 관련이 있지만 생각이 없습니다. 도움이 될만한 점이 있습니다.

도움을받은 후 나는 어수선한 곳을 알게되었습니다. 여기에 기능 코드는 다음과 같습니다

function genGameGrid(){ 
var rows=10, columns=10; 
var table = document.createElement("TABLE"); 
document.body.appendChild(table); 

for(var i=0;i<=rows;i++){ 
    var row = document.createElement("TR"); 
    table.appendChild(row); 

    for(var j=0;j<=columns;j++){ 
     var cell = document.createElement("TD"); 
     var text = document.createTextNode(""); 
     cell.appendChild(text); 
     row.appendChild(cell); 
    } 

}
이 }

Answer 1

.setAttribute 은 3 개 개의 매개 변수에 동의하지 않습니다

y.setAttribute("id", "myTr", i); 

당신은 아마 두 값을 연결하는 시도를?

y.setAttribute("id", "myTr" + i); 

또한 가로 행이 없습니다. myTr 속성을 가진 첫 번째 행에 모든 셀을 추가하고 있습니다! 동일한 id 속성을 가진 행을 생성하고 .getElementById은 첫 번째로 일치하는 요소를 반환합니다.

요소에 특성을 추가하고 동일한 요소를 ID로 가져 오기 위해 DOM을 쿼리 할 필요가 없습니다. 두 번 생각. y은 현재 행을 나타냅니다. 간단하게 코드를 작성할 수 있습니다 :

y.appendChild(z);