<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script language="JScript">
function AddRow(Text1,Text2) {
var tContent = new Array(Text1,Text2)
// get the reference for the table
var mypath=parent.frames['frame2'].document
var mytable=mypath.getElementById("myTable2");
// creates an element whose tag name is TBODY
var mytablebody = mypath.createElement("TBODY");
var mycurrent_cell, currenttext;
// creating all cells
for(j=0;j<1;j++) {
// creates an element whose tag name is TR
mycurrent_row=mypath.createElement("TR");
for(i=0;i<2;i++) {
// creates an element whose tag name is TD
mycurrent_cell=mypath.createElement("TD");
// creates a Text Node
currenttext=mypath.createTextNode(tContent[i]);
// appends the Text Node we created into the cell TD
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
mycurrent_row.appendChild(mycurrent_cell);
}
// creates an element whose tag name is TD
mycurrent_cell=mypath.createElement("TD");
mycurrent_inp=mypath.createElement("INPUT");
mycurrent_inp.setAttribute("type","text");
mycurrent_inp.setAttribute("size","5");
mycurrent_inp.setAttribute("value","1");
mycurrent_inp.setAttribute("name",Text1);
mycurrent_cell.appendChild(mycurrent_inp);
// appends the cell TD into the row TR
// window.alert(mycurrent_cell.name);
mycurrent_row.appendChild(mycurrent_cell);
// appends the row TR into TBODY
mytablebody.appendChild(mycurrent_row);
}
// appends TBODY into TABLE
mytable.appendChild(mytablebody);
window.alert(parent.frames['frame2'].getElementByTagName("INPUT").item(0));
mycurrent_inp.focus
//parent.frames['frame2'].Text1.focus();
}
</script>
</head>
<body>
<table id="myTable1" border="1">
<tr>
<td>1,2</td>
<td>
<a href="javascript:AddRow(1,2);">tabulate</a></td>
</tr>
<tr>
<td>3,4</td>
<td>
<a href="javascript:AddRow(3,4);">tabulate</a></td>
</tr>
<tr>
<td>5,6</td>
<td>
<a href="javascript:AddRow(5,6);">tabulate</a></td>
</tr>
<tr>
<td>7,8</td>
<td>
<a href="javascript:AddRow(7,8);">tabulate</a></td>
</tr>
<tr>
<td>9,10</td>
<td>
<a href="javascript:AddRow(9,10);">tabulate</a></td>
</tr>
</table>
</body>
</html>