Opening Web Page Dialog Boxes with Other Dialog Boxes - Adding a Row in a Child Table
(Page 4 of 4 )
Here we shall see how you can add a row in a table in the child dialog box. The DOM syntax to add a row in a table in the current window (the web page that has the script) is:
tableObject.insertRow(index)
The “tableObject” in the syntax represents the table. This is normally replaced by the following statement:
document.getElementById('myTableID')
So to insert a row in a table in the current page you would type something like:
document.getElementById('myTableID').insertRow(index)
The index is the row number and its count begins from zero (not one).
Now, to insert a row in the child dialog box, you precede the above with the child’s window reference and a dot -- that is:
myWindow.document.getElementById('myTableID').insertRow(index)
When you insert a row, the row is empty; you need to insert cells. When you insert a cell, it is empty; you need to insert its content. The DOM syntax to insert a cell is:
tablerowObject.insertCell(index);
The “tablerowObject” in the syntax represents the table row. This can be replaced by the following statement:
document.getElementById('myTableID').rows[index]
The index here is the row index. So to insert a cell in a table row of the current page you would type something like this:
document.getElementById('myTableID').rows[index].insertCell(index);
The index of the cell is the column number of the cell. Its count begins from zero (not one).
To insert a cell in a table of the child dialog box, you precede the above with the child’s window reference and a dot -- that is:
myWindow.document.getElementById('myTableID').rows[index].insertCell(index);
After adding blank cells you may need to add the content. You use the innerHTML property. To add and automatically change the content of any cell you should type something like this:
myWindow.document.getElementById('T1').rows[index].cells[index].innerHTML = "The Content";
Assume that your child window has the following table:
<table id="T1">
<tr>
<td>
Cell 00
</td>
<td>
Cell 01
</td>
<td>
Cell 02
</td>
</tr>
<tr>
<td>
Cell 10
</td>
<td>
Cell 11
</td>
<td>
Cell 12
</td>
</tr>
</table>
The following code adds an empty row and then uses a for-loop to add empty cells:
myWindow.document.getElementById('T1').insertRow(1);
for(i=0;i<3;i++)
{
myWindow.document.getElementById('T1').rows[1].insertCell(i);
}
In the above code, “myWindow” is the reference that was returned when the child window was opened.
The following code will fill the new blank cells with content.
myWindow.document.getElementById('T1').rows[1].cells[0].innerHTML = "New Cell 10";
myWindow.document.getElementById('T1').rows[1].cells[1].innerHTML = "New Cell 11";
myWindow.document.getElementById('T1').rows[1].cells[2].innerHTML = "New Cell 12";
When you have a new row, you need to know the number of columns in the table in order to know the number of cells to add.
We are through with the topic of changing and adding content to the immediate child box. Next we shall see how to do the same thing with the immediate parent.
This is the end of this section. We take a break here. We shall continue in the next part of the series.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
