<html>
<head>
<script type=
"text/javascript"
>
function
getInnerHTML()
{
alert(document.getElementById(
"tr2"
).innerHTML);
}
function
insCell()
{
var
x=document.getElementById(
'tr2'
).insertCell(0)
x.innerHTML=
"Table Row, Table Cell"
}
function
delCell()
{
document.getElementById(
'tr2'
).deleteCell(0)
}
function
deleteCaption()
{
document.getElementById(
'myTable'
).deleteCaption()
}
function
createCaption()
{
var
x=document.getElementById(
'myTable'
).createCaption()
x.innerHTML=
"My Table"
}
function
delRow()
{
document.getElementById(
'myTable'
).deleteRow(0)
}
function
insRow()
{
var
x=document.getElementById(
'myTable'
).insertRow(0);
var
y=x.insertCell(0);
var
z=x.insertCell(1);
y.innerHTML=
"New Cell 1"
;
z.innerHTML=
"New Cell 2"
;
}
</script>
</head>
<body>
<center><table id=
"myTable"
border=
"1"
>
<tr id=
"tr2"
>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr id=
"tr2"
>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr id=
"tr2"
>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<center>
<table border=
"0"
>
<tr><th colspan=
"2"
>Table Controler</th></tr>
<tr><td>
<center>
<input type=
"button"
onclick=
"createCaption()"
value=
"Create caption"
></td><td>
<center>
<input type=
"button"
onclick=
"deleteCaption()"
value=
"Delete caption"
/>
</td></tr>
<tr><td colspan=
"2"
>
<center>
<input type=
"button"
onclick=
"getInnerHTML()"
value=
"Alert innerHTML of table row"
/>
</td></tr>
<tr><td>
<center>
<input type=
"button"
onclick=
"insRow()"
value=
"Insert row"
>
</td><td>
<center>
<input type=
"button"
onclick=
"delRow()"
value=
"Delete first row"
>
</td></tr>
<tr><td>
<center>
<input type=
"button"
onclick=
"insCell()"
value=
"Insert cell"
>
</td><td>
<center>
<input type=
"button"
onclick=
"delCell()"
value=
"Delete cell"
>
</td></tr>
</table>
</body>
</html>