Hi,

I'm trying to create a page that contains a table that is hidden initially (on page startup). Later, when a link is clicked, the table should show permanently. The problem I am having, however, is that when I click on the link, the table shows for a second and then dissapears again. Below is the code:

<head>
        <script type="text/javascript">
var n=0;
        </script>
</head>
<body onload="tableOff('myTable')">

        <!-- Extend/Collapse Tables Script -->
        <script type="text/javascript">
            function tableOff(Object) {
                              if (n==0) {
                        document.getElementById(Object).style.display="none";
                    }
n++;
                }

                function tableOn(Object) {
                    if (n >=1) {
                        document.getElementById(Object).style.display="";
                    }
                }
        </script>
        <!-- Extend/Collapse Tables Script -->

<table id="myTable">
<tr>
<td>
My Table
</td>
</tr>
</table>

<a href="this.jsp" onClick="tableOn('myTable')">Click Me</a>

</body>

I know incrementing a variable may not be the most efficient way, but for now if I can get that to work then it will be easy to change that to boolean at a later stage...

Hi Ashton,

in the <head> section of your page, you may apply this format:

<script type="text/javascript">
<!--
// Basic Sample


var tableOn = function( obj ) {
   document.getElementById( obj ).style.display = "table";
};

onload = function() {
document.getElementById("myTable").style.display = "none";
};
// -->
</script>

do the same instance as you call your tableOn( tableID ) function... <a href="javascript:void(0);" onclick="tableOn('myTable');">Show Table</a>

This article has been dead for over six months. Start a new discussion instead.