Hiding and Displaying 2 HTML tables in the same place with DHTML

Discussion in 'Javascript' started by success_ny@yahoo.com, Jul 22, 2005.

  1. Guest

    I would like to be able to display either one or the other HTML table
    in the same place. I.e., there are 2 buttons on the screen. When the
    user clicks one button, the table A is displayed below. When the user
    clicks the other button, the table A disappears and the table B appears
    in the same place.

    When I use the classic div tags followed by table code, they are
    displayed sequentially on the page, rather than in the same place.

    Can someone help with a code snippet and advice?

    Thanks!!!
    , Jul 22, 2005
    #1
    1. Advertising

  2. web.dev Guest

    Hi,

    >When I use the classic div tags followed by table code, they are displayed sequentially on the page, rather than in the >same place.


    You may not have provided enough information, but to me it sounds like
    you haven't done anything with css? If that is the case, let's assume
    table A is the first table displayed like so in your html:

    <input type = "button" onClick = "toggleA()" />
    <input type = "button" onClick = "toggleB()" />

    <div id = "tableA" style = "display: block">
    [your tableA code]
    </div>

    <div id = "tableB" style = "display: none">
    [your tableB code]
    </div>

    Please note this isn't the most efficient of code, but it'll get you
    by. In your javascript you could have the following:

    function toggleA()
    {
    document.getElementById("tableB").style.display = "none";
    document.getElementById("tableA").style.display = "block";
    }

    function toggleB()
    {
    document.getElementById("tableA").style.display = "none";
    document.getElementById("tableB").style.display = "block";
    }

    This will in effect "hide" one table, and in it's place show the other
    table instead.

    Hope this helps.
    web.dev, Jul 23, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sridhar
    Replies:
    2
    Views:
    358
  2. Jason Williamson
    Replies:
    0
    Views:
    81
    Jason Williamson
    Nov 30, 2003
  3. Steve
    Replies:
    1
    Views:
    280
    Richard Cornford
    Apr 9, 2005
  4. DHTML events with tables

    , May 14, 2006, in forum: Javascript
    Replies:
    0
    Views:
    112
  5. Ste
    Replies:
    41
    Views:
    805
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page