Question

I have two html files information.html and employee.html.

Information.html contains two tables having IDs ‘top’ and ‘bottom’. Employee.html is included in the <table id='top'> of information.html.

Employee.html’s code, containing just a dummy <table>, is as follows:

<!-- employee.html -->
    <table align = "center" border="1" height="100px">
       <tr></b><td><b>No.</b></td><td><b>Name</b></td><td><b>Age</b></td></tr>

       <script type="text/javascript">
       var i =0;
       for (i= 0;i<20;i++)
       {
      document.write("<tr onclick= '---' ><td><b>" + i);             
        document.write("</b></td><td>Usman</td><td>56</td></tr>");
       }
       </script>
    </table>

When i open information.html in my browser, i see employee.html included in the <table id='top'> of information.html.

Now, what should i write in onclick (in the above code) so that when user click on a row in the table appearing in the ‘top’ table of information.html, some arbitrary text may appear in the <table id='bottom'> of information.html.

Please guide me.

Thanks

Answer 1

You need to get the element on the page into which you want to insert the text, this is done using the getElementById function to get the element with id #bottom. Then you can use innerHTML to set the content of the table.

document.write("<tr onclick='document.getElementById(\"bottom\").innerHTML = \"some text\"'><td><b>" + i);

Don’t forget the backslashes, otherwise you might find the quotes won’t be escaped properly