Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    Code:
    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"; 
       }
    }
    /Daniel

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Code:
    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
    Code:
    <input type=button onClick="toggleVis('table1'); toggleVis('AddTable')" value="Shown-Hidded" name="test" >
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Code:
    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.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle,

    It is NOT working.....i use IE only.
    Last edited by ClueLess; 02-26-2003 at 03:16 AM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by ClueLess; 02-26-2003 at 02:07 PM.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle, you are quick :-)

    I just reposted the problem.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, hehe

    Change

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

    to

    <DIV ID=AddTable STYLE="display: none;">
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #12
    Regular Coder
    Join Date
    Nov 2002
    Posts
    184
    Thanks
    0
    Thanked 0 Times in 0 Posts
    beetle,
    I’m so glad that having you in this forum!!!! You saved my life. Thank you very much.

  • #13
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •