Table within Table not responding to ElementById call

[Camet]

I have a table created with Javascript. When any row after the first
row is clicked on, that row expands and shows a smaller table inside of
it.

/////////Code Start//////////

/* rownum is the number of the row of the table that was clicked on.
Since row 0 contains the headings of the table, but the array of
objects starts at 0, when calling on the object array, rownum is sent
minus 1. */
var rownum = this.rowIndex;

var stuff;

/* thisTableId is the id of the outer table that was clicked on */
var x = document.getElementById('thisTableId').rows[rownum].cells;

tableArray[rownum-1].image = '<img src="dashSign.gif"><\/img>';
x[0].innerHTML = tableArray[rownum-1].image;

/* variable stuff will hold the smaller table's information until added
to the cell of the row */
stuff = '<b>' + tableArray[rownum-1].name + '<\/b><BR><BR>';
var nameId = "newTable";

/* making the first part of the inner table */
stuff += '<TABLE border=1 width=100% cellSpacing=0 cellPadding=10
id="'+nameId +'">';

for (var h = 0; h < statsArray[rownum-1][2]; h++)
{
/* setRow contains the code for each row to be added */
stuff += regionsArray[rownum-1][h].setRow;
}
stuff+= '<\/TABLE>';

/* after all that, add the new table to the cell. */
x[1].innerHTML=stuff;
/* the new table shows up on screen inside of the larger table at this
point */

/* this alert shows that the new table seems to have the correct id and
all the rest of the code. */
alert(x[1].innerHTML);

/**** BUT from here on, the table cannot seem to be retrieved. This
code returns null or undefined when tested ****/
var table = document.getElementById(nameId);
rows = table.rows;
var n = rows.length;

/////////Code Finished//////////

note that I am only interested in IE for this project. It does not
need to be platform compatible.

If someone could help me, it would be great. I don't understand why
the new table that was created, cannot be reached.

Thanks, Camet