0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
a.calvert
  • 3
  • 3
  • 1
    Possible duplicate of [Equivalent of include() in HTML](https://stackoverflow.com/questions/3928331/equivalent-of-include-in-html) – Salvatore Aug 13 '18 at 16:08
  • No it’s not the same. I want to click a button ex: assets and then the assets data table pop up next to it. Then I could click the other button ex:routes and the routes data table pops up next to it – a.calvert Aug 13 '18 at 16:36
  • Welcome to SO, Please add your code into snippet, So someone has quickly fixed your issue. – martinho Aug 13 '18 at 16:41
  • I added my code for you guys. – a.calvert Aug 13 '18 at 17:20

1 Answers1

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.

Eden
  • 24
  • 4
  • The only issue with this solution is I don’t want the tables to be displayed all the time. I only want the table to show when the button/link is clicked on. – a.calvert Aug 13 '18 at 20:39
  • they are not shown all the time because your css hides them. your `show` function works fine, but the way you inserted the href caused that the page to redirect so it never ran the `show` function in the first place. – Eden Aug 13 '18 at 20:42