[英]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
I have 6 links. 我有6个链接。 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. 对于6个不同的表,它们每个都有自己的.html文件,我正在从中提取它们。 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> </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>
If your need is only to show the tables from a given html
page, you can use iframe
. 如果仅需要显示给定html
页面中的表,则可以使用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>
</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). 一旦每个div
包含其对应的iframe
,您的show(nr)
函数将显示相关的div
,并因此显示相关的iframe
(据我所知,它包含表格)。
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. 注意 :如果您实际上需要访问iframe中的数据,则这种方法不太合适,但是出于查看目的,应该没问题。 There are better ways to handle this, especially if you use a client-side framework like angular or react. 有更好的方法来处理此问题,尤其是当您使用诸如angular或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. 我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.