I would like to write a JavaScript snippet that populates the
table based on the selection, and not create several details panes and toggle their visibility.
I tried implement this using the following code but its not working as desired,firstly,it only works with internet explorer under certain conditions and it just toggles visibility of detail panes;Below is my code;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="tblTB_0.style.display='';tblTB_1.style.display='none'; tblTB_2.style.display='none'; tblTB_3.style.display='none'">
<center>
<table>
<tr>
<td> <H1> <align="left"> Candi Colledge of Computing
<br/>Course Page </H1> </td>
</tr>
</table>
</center>
<hr>
</br>
<H2><P STYLE="color: blue">Honours Courses.</H2>
<left>
<p><a href="" onclick="tblTB_1.style.display=''; tblTB_2.style.display='none'; tblTB_3.style.display='none'">
Concurrent Programming</a> <br/>
<a href="" onclick="tblTB_1.style.display='none';tblTB_2.style.display=''; tblTB_3.style.display='none'">Simulation of
Networks</a><br/>
<a href="" onclick="tblTB_1.style.display='none';tblTB_2.style.display='none'; tblTB_3.style.display=''">Advanced Computer
Science Topics</a></p>
<br>
<table style="table-layout: fixed"; border=1>
<colgroup>
<col width="100px"><col width="150px"><col width="150px">
</colgroup>
<tbody id="tblTB_0">
<tr>
<td>Course Code</td>
<td>Lecturer</td>
<td>Hours/Week</td>
<td>Credits</td>
</tr>
</tbody>
<tbody id="tblTB_1">
<tr>
<td>RW 714</td>
<td>Dr. kate</td>
<td>2 hrs</td>
<td>15</td
</tr>
</tbody>
<tbody id="tblTB_2">
<tr>
<td>RW 742</td>
<td>Prof. Broz</td>
<td>4 hrs</td>
<td>10</td>
</tr>
</tbody>
<tbody id="tblTB_3">
<tr>
<td>RW 716</td>
<td>Consultant</td>
<td>3 hrs</td>
<td>12</td>
</tr>
</tbody>
</table>
</left>
<br>
</BODY>
</HTML>
