Adding inner table to a dynamic td of a table

Try This codes


Script

<script language="javascript">

function addtabletesting(tableID) {


var table1 = document.getElementById(tableID);      
var rowCount1 = table1.rows.length;      
var row1 = table1.insertRow(rowCount1-1);
var td1 = document.createElement("TD");

/*
 creating a new row row1 andadded a column td1
*/

var table2= document.createElement("TABLE");
var rowCount2 = table2.rows.length;      
var row2 = table2.insertRow(rowCount2);
var td2 = document.createElement("TD");

/*
Created a new table table2 added row2 and td2.
*/
td2.innerHTML = "<h4>my new column in new inner table </h4>";

row1.appendChild(td1);
td1.appendChild(table2);
row2.appendChild(td2);
/*
Added td1 into row1, table2 into td1, and td2  into row2.
*/

}

</script>

html


<table id="testtable1" border="1">
<tr><td width="150">old table row 1 column 1</td></tr>
<tr><td>old table row 2 column 2</td></tr>

<tr><td> <a  onclick="addtabletesting('testtable1')" >Add table</a> </td></tr>
</table>