如何在與按鈕相同的頁面中顯示表格？表格已經在另一個html文件中組成，所以我只是從那里拉出它們

Question

我有6個鏈接。 我想當我單擊表旁邊顯示的鏈接時。 我需要表格顯示在與鏈接相同的頁面中，而不是替換它。 所以我需要隱藏所有表格，直到我單擊該鏈接。 對於6個不同的表，它們每個都有自己的.html文件，我正在從中提取它們。 這是我的代碼：

 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

如果僅需要顯示給定html頁面中的表，則可以使用iframe 。 該選項取決於您的頁面托管在某個地方，以便您可以鏈接到它們。

例如：

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

在你的代碼中

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

一旦每個div包含其對應的iframe ，您的show(nr)函數將顯示相關的div ，並因此顯示相關的iframe （據我所知，它包含表格）。

注意 ：如果您實際上需要訪問iframe中的數據，則這種方法不太合適，但是出於查看目的，應該沒問題。 有更好的方法來處理此問題，尤其是當您使用諸如angular或react之類的客戶端框架時。 這應該是一種快速而簡單的方法，尤其是在您的表不屬於該應用程序的情況下（我不確定，因為您沒有明確提及它）。

我希望這有幫助。