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>
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>
No comments:
Post a Comment