在页面加载时隐藏 html 表格答案

【问题标题】：Hiding html table on page loading在页面加载时隐藏 html 表格
【发布时间】：2014-12-17 13:10:05
【问题描述】：

我有一个系统，一旦用户登录，就会有两个表。我只希望最初显示一个表格，但我似乎无法隐藏它。到目前为止，我已经尝试过

style="display:none;"

在表启动内，也曾尝试使用javascript再次将其设置为加载，但没有运气。由于使用了变量等，我的表主要是在 php 中创建的，而且一切正常，它只是隐藏了我遇到问题的表。

<table id="mainView" style="width:100%;">
    <!-- php to create table -->
    <?php
         .... code creating table ....
    ?>
</table>

然后是第二个表，我想在加载时隐藏它

<table id="directoryView" style="display:none;">
    <!-- php to create table -->
    <?php
        .... code creating table ....
    ?>
</table>

我试过的JS是

function initialDisplay()
{
    document.getElementById('mainView').style.display = "initial";
    document.getElementById('directoryView').style.display = "none";
}

我从我的主 php 文件中调用了

echo "<script> initialDisplay(); </script>";

任何帮助将不胜感激。

【问题讨论】：

你能提供JS fiddle吗？

标签： php html view html-table

【解决方案1】：

HTML：

<body onload="initialDisplay()">

    <table id="mainView" style="width:100%;">
            <!-- php to create table -->
            <?php
                 .... code creating table ....
            ?>
        </table>

        <table id="directoryView" style="display:none;">
            <!-- php to create table -->
            <?php
                .... code creating table ....
            ?>
        </table>

使用 JS

 <script>
       function initialDisplay()
      {
    document.getElementById('mainView').style.display = "initial";
    document.getElementById('directoryView').style.display = "none";
      }       
        </script>

【讨论】：

不要引导用户推荐新事物。您只需要尝试使用javascript。

【解决方案2】：

试试这个

在 Javascript 中

<body onload="initialDisplay()">

        <table id="mainView" style="width:100%;" border="1">
                <!-- php to create table -->
                  <tr><td>test content1</td></tr>
            </table>

            <table id="directoryView">
                <!-- php to create table -->
               <tr><td>test content2</td></tr>
            </table>
</body>

     <script>
    function initialDisplay()
          {
        document.getElementById('mainView').style.display = "block";
        document.getElementById('directoryView').style.display = "none";
          }  
     </script>

在 jquery 中

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <body >

        <table id="mainView" style="width:100%;" border="1">
                <!-- php to create table -->
                  <tr><td>test content1</td></tr>
            </table>

            <table id="directoryView">
                <!-- php to create table -->
               <tr><td>test content2</td></tr>
            </table>
</body>

     <script>
     $(document).ready(function(){
     $("#mainView").show();
     $("#directoryView").hide();

     });
     </script>

【讨论】：