How to display text in a frame when a row of a table in a separate frame is clicked?

Question

Is it possible that clicking on a row of a table will generate information particular to that row in a separate frame below the frame of the table? e.g. i have created following dummy table.

<table>
    <script type="text/javascript">
    var i =0;
    for (i= 0;i<20;i++)
    {
    document.write("<tr><td><b>" + i);
    document.write("</b></td><td>209.33.32.34</td><td>132.32.22.37</td><td>Bit-torrent</td><td>49000</td></tr>");
    }
    </script>
</table>

Actually, the scenario i am facing is a little complex.

i have 2 html files

1. Parent.html (contains header, footer, and two tables i.e. table1 and table2)
2. Child.html (contains only a single table i.e. dummyTable)

Child.html is included in table1 in Parent.html.

Is it possible that when i click on a row of dummyTable, some arbitrary text may appear in table2 of Parent.html??

Logically i need following flow

Parent.html -> table1: Child.html onClick() a row of a table in Child.html -> Parent.html -> table2: 'some arbitrary text'

Answer 1

If you're on the the child html you reference the table in the parent by:

parent.document.getElementById('parentTableId')

and if you're on the parent html, to access the child html table:

document.getElementById('iframeid').contentWindow.document.getElementById('childTableId')

Answer 2

Suggest you look at jQuery. You can add a click event (http://docs.jquery.com/Events/click#fn) to the table row and use jquery to extract the attributes (http://docs.jquery.com/Attributes) of that row and display them in another table using something like append (http://docs.jquery.com/Manipulation/append).

Answer 3

Something like this, in child.html:

document.getElementById('dummyTableRow').onclick = function()
{
    var table1 = parent.document.getElementById('table1');
    var tr = document.createElement('tr');
    // Fill in <td>s here...
    table1.getElementsByTagName('tbody')[0].appendChild(tr);
};