...

View Full Version : How can I change tables?????? Urgent---please help



ClueLess
02-25-2003, 10: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, 10: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, 11: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, 11: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, 11: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, 04:11 AM
beetle,

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

beetle
02-26-2003, 05: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, 03: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, 03: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, 03:08 PM
beetle, you are quick :-)

I just reposted the problem.

beetle
02-26-2003, 04:13 PM
Oh, hehe

Change

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

to

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

ClueLess
02-26-2003, 04: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, 06: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 ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum