RowIndex при создании таблицы с Javascript

Question

У меня есть следующие функции для добавляемых строк и ячеек в пустой table:

 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); 
     }