How to display table in same page as the button?The tables are already made up in another html file so I’m just pulling them from there

Question

I have 6 links. I would like for when I click on a link that table shows next to it. I need the table to show in same page as link and not replace it. So I need all tables hidden until i click that link. For the 6 different tables they each have their own .html file I'm pulling them from. Heres my code:

 function show(nr) { document.getElementById("table1").style.display = "none"; document.getElementById("table2").style.display = "none"; document.getElementById("table3").style.display = "none"; document.getElementById("table4").style.display = "none"; document.getElementById("table5").style.display = "none"; document.getElementById("table6").style.display = "none"; document.getElementById("table" + nr).style.display = "block"; } 

 td { vertical-align: center; } #table1, #table2, #table3, #table4, #table5, #table6 { display: none; } 

 <h1>BV-Line58 Demi</h1> <br> <table> <tr> <td> <a href="bv-line58assets.html" name="table1" onclick='show(1); '>Assets</a> <br><br> <a href="bv-line58endpoints.html" name="table2" onclick='show(2);'>Endpoints</a> <br><br> <a href="#" name="table3" onclick='show(3);'>IP Search</a> <br><br> <a href="#" name="table4" onclick='show(4);'>Non-Malicious Alerts</a> <br><br> <a href="bv-line58routes.html" name="table5" onclick='show(5);'>Routes</a> <br><br> <a href="#" name="table6" onclick='show(6);'>Suricata Alerts</a> </td> <td> &nbsp; </td> <td> <div id="table1"></div> <div id="table2"></div> <div id="table3"></div> <div id="table4"></div> <div id="table5"></div> <div id="table6"></div> </td> </tr> </table> 

Answer 1

If your need is only to show the tables from a given html page, you can use iframe . That option relies on the fact that you pages are hosted somewhere so you can link to them.

For example:

<iframe width="560" height="315" src="https://www.your-domain.com/bv-line58assets.html" frameborder="0"></iframe>

In your code

<table>
  <tr>
    <td>
      <a href="javascript:void(0)" name="table1" onclick='show(1);>Assets</a>
    </td>
    <td>
      &nbsp;
    </td>
    <td>
      <div id="table1">
          <iframe width="560" height="315" src="https://www.your-domain.com/bv-line58assets.html" frameborder="0"></iframe>
      </div>
    </td>
  </tr>
</table>

Once each div contains its corresponding iframe , your show(nr) function will show the relevant div , and therefor the relevant iframe (which holds the table, as much as I understand).

Note : this approach is not very comfortable if you actually need to access the data inside the iframe, but for view purposes it should be fine. There are better ways to handle this, especially if you use a client-side framework like angular or react. This should be a fast and simple way to go with, especially if your tables are not a part of this application (which I am not sure about, as you didn't mention it clearly)

I hope this helps.