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

[success_ny]

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!!!

 

[web.dev]

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.