How can I change tables?????? Urgent---please help

ClueLess

02-25-2003, 09:35 PM

I have 2 tables, when I click the button (1 button), I would like the table2 is shown and table 1 is hidden.
the script I have ..... it's just shown table #2 when I click the button. How can I hide table #1
Can anyone please help me to do that???? Thx for your help

<html>
<head>
<title>Untitled</title>
</head>
<script language=Javascript>
function showTable() {
if(document.all)
document.all.AddTable.style.visibility = "visible";
else
document.AddTable.visibility = "visible";
}
</script>
<body>

<table id="table1">
<tr>
<td>TABLE1</td>
<td>Hide me when you click the button</td>
</tr>
</table>

<input type=button onClick="showTable();" value="Shown-Hidded" name="test" >

<DIV ID=AddTable STYLE="visibility:hidden;">
<table id="table2">
<tr>
<td>TABLE2</td>
<td>Yes.....this one works</td>
</tr>
</table>
</DIV>

Danne

02-25-2003, 09:46 PM

Try this:

function showTable() {
if(document.all)
{
document.all.table1.style.visibility = "hidden";
document.all.AddTable.style.visibility = "visible";
}else{
document.table1.style.visibility = "hidden";
document.AddTable.visibility = "visible";
}
}

beetle

02-25-2003, 10:21 PM

I wrote these functions earlier to handle stuff like this. Trust me, in the long run it's much better to have some generic functions that handle the bulk of the work and just make a simple interface to them. Here's the funcs...function getNode( oId )
{
return ( document.layers ) ? document.layers[oId] : ( document.getElementById || document.all )( oId );
}

function toggleVis( oId )
{
var o = getNode( oId );
var vis = ( document.layers ) ? o.visibility : ( o.currentStyle ) ? o.currentStyle.visibility : o.style.visibility;
if ( vis == 'hidden' || vis == 'hide' )
showObj( o );
else
hideObj( o );
}

function hideObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.visibility = 'hide';
else
o.style.visibility = 'hidden';
}

function showObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.visibility = 'show';
else
o.style.visibility = 'visible';
}And just interface them with this<input type=button onClick="toggleVis('table1'); toggleVis('AddTable')" value="Shown-Hidded" name="test" >

ClueLess

02-25-2003, 10:24 PM

Supper!

I have another question, my table1 has 10 rows and table2 has 15 rows. If I do this way, the distance between the top and bottom is too much (because, I have something on the top and the bottom of this page). Is there another BETTER way to show and hide table?

beetle

02-25-2003, 10:45 PM

You can use the display property instead. Although, I don't know enough about NS4 to fit it well into the function structure I made, assuming it's a direct property of the object and not the style object, this should work...function toggleDisp( oId )
{
var o = getNode( oId );
var disp = ( document.layers ) ? o.display : ( o.currentStyle ) ? o.currentStyle.display : o.style.display;
if ( disp == 'none' )
showObj( o );
else
hideObj( o );
}

function hideObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.display = 'none';
else
o.style.display = 'none';
}

function showObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.display = 'block';
else
o.style.display = 'block';
}getNode(), of course, remains unchanged.

ClueLess

02-26-2003, 03:11 AM

beetle,

It is NOT working.....i use IE only.

beetle

02-26-2003, 04:50 AM

Sorry, but "it's not working" enables me to do nothing to help you. Can you give me the error message or provide a link?

ClueLess

02-26-2003, 02:02 PM

I fixed the error. But, the problem is the Table2 DID NOT show when I click the button.

Thanks for helping to solve this problem.....

Below is the code:

<html>
<head>
<title>Untitled</title>
</head>
<script language="javascript">
function getNode( oId )
{
return ( document.layers ) ? document.layers[oId] : ( document.getElementById || document.all )( oId );
}

function toggleDisp( oId )
{
var o = getNode( oId );
var disp = ( document.layers ) ? o.display : ( o.currentStyle ) ? o.currentStyle.display : o.style.display;
if ( disp == 'none' )
showObj( o );
else
hideObj( o );
}

function hideObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.display = 'none';
else
o.style.display = 'none';
}

function showObj( o )
{
if ( typeof o == "string" ) o = getNode( o );
if ( document.layers )
o.display = 'block';
else
o.style.display = 'block';
}

</script>
<body>
<table id="table1">
<tr>
<td>TABLE1</td>
<td>Hide me when you click the button</td>
</tr>
</table>

<input type=button onClick="toggleDisp('table1'); toggleDisp('AddTable')" value="Shown-Hidded" name="test" >

<DIV ID=AddTable STYLE="visibility:hidden;">
<table>
<tr>
<td>TABLE2</td>
<td>Yes.....this one works</td>
</tr>
</table>
</DIV>
</body>
</html>

beetle

02-26-2003, 02:04 PM

toggleVis != toggleDisp!!!

I renamed the function to have a more accurate semantic meaning. Just change toggleVis to toggleDisp in the onclick and you're set!

ClueLess

02-26-2003, 02:08 PM

beetle, you are quick :-)

I just reposted the problem.

beetle

02-26-2003, 03:13 PM

Oh, hehe

Change

<DIV ID=AddTable STYLE="visibility:hidden;">

to

<DIV ID=AddTable STYLE="display: none;">

ClueLess

02-26-2003, 03:29 PM

beetle,
I’m so glad that having you in this forum!!!! You saved my life. Thank you very much.

beetle

02-26-2003, 05:14 PM

Originally posted by ClueLess
beetle,
I’m so glad that having you in this forum!!!! You saved my life. Thank you very much. That's me, programmer, designer, father, all around nice guy, and....savior ;)