如何使 HTML/CSS 按钮出现在被隐藏的表格上方

Question

我是 HTML、CSS 和 JS 的新手。 我有以下代码片段，我试图在其中显示/隐藏表格。 我有两个问题：

“显示环境”按钮应该在表格上方，而不是下方；
表格应在页面首次加载时隐藏，仅在单击按钮时显示。

我一直在查看代码，但无法弄清楚为什么会发生这两个问题。 任何人都可以看到问题吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Report</title>
    <style type="text/css">
      .table-content {
        display: inline;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .body_foreground {
        color: #000000;
      }

      .body_background {
        background-color: #EEEEEE;
      }

      .content {
        display: none;
        overflow: hidden;
      }
    </style>
  </head>
  
  <body class="body_foreground body_background" style="font-size: normal;">
    <pre class="table-content">
                <h1>html_report</h1 s>
                <table id="environment">
                    <tr>
                        <td>Base Version</td>
                        <td>6.0.1</td>
                    </tr>
                    <tr>
                        <td>Extended Version</td>
                        <td>5.14.0</td>
                    </tr>
                    <tr>
                        <td>Project Version</td>
                        <td>36</td>
                    </tr>
                </table>
                <div>
                    <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" />
                </div>
            </div>
            <script type="text/javascript"> function toggle_env() { var content = document.getElementById("environment"); if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } } </script>
        </pre>
  </body>
</html>

Answer 1

首先，您需要将按钮移到表格之外。 否则，当表格隐藏时，按钮将始终隐藏。

然后您可以使用 Javascript 隐藏表格，直到单击按钮。

这是一个例子：

 // Javascript let table = document.getElementById('table') let button = document.getElementById('button') button.addEventListener('click', () => { if(table.hidden) { table.hidden = false button.innerHTML = 'Close Environment' }else{ table.hidden = true; button.innerHTML = 'Open Environment' } })

 /* CSS */ table, th, td { padding: 0.5rem 1rem; border: 1px solid black; border-collapse: collapse; } button { border: none; padding: 3px; margin-bottom: 1rem; }

 <!-- HTML --> <button id="button">Open Environment</button> <table id="table" hidden> <tr> <td>Lorem</td> <td>Ipsum</td> </tr> </table>

Answer 2

你的按钮在桌子下面，所以把它拿出来。 我删除了一个额外的 div。 重命名您的 h1 标签。 并从 CSS 中删除了样式并将其添加到 JS 中，因为它不知道为什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Report</title>
    <style type="text/css">
      .table-content {
        display: inline;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .body_foreground {
        color: #000000;
      }

      .body_background {
        background-color: #eeeeee;
      }

      .content {
        display: none;
        overflow: hidden;
      }
    </style>

  </head>

  <body class="body_foreground body_background" style="font-size: normal">
    <pre class="table-content">
      <div>
  <!-- moved button to the top-->      <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" />
    </div>
                <h1>html_report</h1>  <!-- You had an </h1 s> -->
                <table id="environment">
                    <tr>
                        <td>Base Version</td>
                        <td>6.0.1</td>
                    </tr>
                    <tr>
                        <td>Extended Version</td>
                        <td>5.14.0</td>
                    </tr>
                    <tr>
                        <td>Project Version</td>
                        <td>36</td>
                    </tr>
                </table>
        </pre>
    <script type="text/javascript">
      const content = document.getElementById("environment");
      content.style.display = "none"; // set default state to hidden
      function toggle_env() {
        if (content.style.display === "none") {
          content.style.display = "block";
        } else {
          content.style.display = "none";
        }
      }
    </script>
  </body>

</html>

Answer 3

至于如何使按钮出现在表格上方，您只需将 div 移动到表格元素上方即可。 像这样：

<div>Your div with input element</div>
<table></table>

至于第一次加载页面时出现表格的原因是您为其声明了错误的 CSS 规则。 你有：

.content{
  display: none;
  overflow: hidden;
}

相反，它应该是：

#environment{
  display: none;
  overflow: hidden;
}

希望这会有所帮助

如何使 HTML/CSS 按钮出现在被隐藏的表格上方

问题描述

3 个解决方案

解决方案1
3 2022-08-07 16:47:56

解决方案2
2 已采纳 2022-08-07 17:05:39

解决方案3
1 2022-08-07 17:10:36

如何使 HTML/CSS 按钮出现在被隐藏的表格上方

问题描述

3 个解决方案

解决方案1 3 2022-08-07 16:47:56

解决方案2 2 已采纳 2022-08-07 17:05:39

解决方案3 1 2022-08-07 17:10:36

解决方案1
3 2022-08-07 16:47:56

解决方案2
2 已采纳 2022-08-07 17:05:39

解决方案3
1 2022-08-07 17:10:36