title: rowIndex when creating a table with Javascript
body: <p>I have the following function to append rows and cells to an empty <code>table</code>:</p>
  
  <pre><code>        function createTable(size) {
              var table = document.getElementById("gameTable");
              for (var i=0; i&lt;size; i++) {
                  var tr = document.createElement("tr");
                  for (var j=0; j&lt;size; j++) {
                      var td = document.createElement("td");
                      tr.appendChild(td);
                  }
                  table.appendChild(tr);
                  tr.rowIndex = i;
              }
  
          }
  </code></pre>
  
  <p>So far so good.</p>
  
  <p>My problem is that later, when I tried to reach specific cells inside the table:</p>
  
  <pre><code>var x = target.parentNode.rowIndex;
  var y = target.cellIndex; 
  
  table.rows[x].cells[y].innerHTML = 'blah'
  </code></pre>
  
  <p><code>target</code> is the specific <code>TD</code> that was clicked.</p>
  
  <p>the <code>rows[x]</code> index is always <code>-1</code>. Every time I try the line above I get an error: "cannot read property 'cells' of undefined"<br>
   I even tried manually setting the rowIndex of each Row to what it should be (inside the function), but to no avail.</p>
  
  <p>The cellIndex comes out fine, but the rowIndex is -1 and each and every one of the newly created table rows.</p>
  
  <p>What can I do to correct this?</p>