JavaScript snippet that populates the table

Posted by kayn on Stack Overflow See other posts from Stack Overflow or by kayn
Published on 2010-04-06T17:48:20Z Indexed on 2010/04/06 17:53 UTC
Read the original article Hit count: 257

Filed under:

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>

© Stack Overflow or respective owner

Related posts about JavaScript