在页面加载时隐藏 html 表格
Posted
技术标签:
【中文标题】在页面加载时隐藏 html 表格【英文标题】：Hiding html table on page loading 【发布时间】：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吗？ 【参考方案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>
【讨论】：
以上是关于在页面加载时隐藏 html 表格的主要内容，如果未能解决你的问题，请参考以下文章