Wednesday, December 7, 2011

Make a dynamic table using hide content in JavaScript

When you click row 1, cell 1 in the following table, the column 2 content shows.
Same for row 2. So you can make a dynamic table to show and hide row and column contents
Show Hide/Show
row 1, cell 1
row 2, cell 1

Source code:
 <style type="text/css">
.hidden { display: none; }
.displayed { display: block; }

<script type="text/javascript">
function display(divID) {
    var item = document.getElementById(divID);
    if (item) {



<table border="1", width="100%">
<tr> <td width="50%"> Show </td> <td width="50%">Show/Hide </td>
<tr> <td><a id='toggletext' href="javascript:display('row1');">row 1, cell 1</a></td> <td id="row1" class="hidden">row 1, cell 2</td> </tr>
<tr> <td><a id='toggletext' href="javascript:display('row2');">row 2, cell 1</a></td> <td id="row2" class="hidden">row 2, cell 2</td> </tr>

No comments:

Post a Comment