rowIndex에 빈 <code>table</code>에 자바 스크립트

Question

I 행과 셀을 추가하는 다음과 같은 기능을 가지고있는 테이블을 만들 때 :

 function createTable(size) { 
      var table = document.getElementById("gameTable"); 
      for (var i=0; i<size; i++) { 
       var tr = document.createElement("tr"); 
       for (var j=0; j<size; j++) { 
        var td = document.createElement("td"); 
        tr.appendChild(td); 
       } 
       table.appendChild(tr); 
       tr.rowIndex = i; 
      } 

     } 

를 지금까지 너무 좋아.

내 문제는 그 후, 나는 테이블 내 특정 세포에 도달하려고 할 때입니다 :

var x = target.parentNode.rowIndex; 
var y = target.cellIndex; 

table.rows[x].cells[y].innerHTML = 'blah' 

target 클릭 된 특정 TD입니다.

rows[x] 색인은 항상 -1입니다. 위의 줄을 시도 할 때마다 "정의되지 않은 셀을 읽을 수 없습니다."
각 행의 rowIndex를 함수 내에서 수동으로 설정하려고 시도했지만 아무런 효과가 없습니다.

cellIndex는 괜찮지 만 rowIndex는 -1이고 새로 생성 된 테이블 행은 모두 하나입니다.

이 문제를 해결하려면 어떻게해야합니까?

Answer 1

이것은 <tr> 요소를 <tbody>에 추가하여 해결할 수 있습니다.

 function createTable(size) { 
      var table = document.getElementById("gameTable"); 
      var tb = document.createElement("tbody"); 
      for (var i=0; i<size; i++) { 
       var tr = document.createElement("tr"); 
       for (var j=0; j<size; j++) { 
        var td = document.createElement("td"); 
        tr.appendChild(td); 
       } 
       tb.appendChild(tr); 
      } 
      table.appendChild(tb); 
     }