Javascript html页面打开时如何隐藏表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6562175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to hide table when html page opens
提问by Arianule
Hallo there I have some javascript code allowing for a table to be visible when my mouse passes over a link and to hide when my mouse moves out. The problem I have is to have the table 'hidden' when the page opens. How could I achieve this. This is my code for the hiding and showing of the table.
你好，我有一些 javascript 代码，允许当我的鼠标经过链接时可以看到表格，并在我的鼠标移出时隐藏表格。我遇到的问题是在页面打开时“隐藏”表格。我怎么能做到这一点。这是我隐藏和显示表格的代码。
<li onmouseout="hideMenu('families')" onmouseover="showMenu('families')" ><a href="#">Five Families</a>
<table class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
<tr><td><a href="#">Gambino</a></td></tr>
<tr><td><a href="#">Genovese</a></td></tr>
<tr><td><a href="#">Colombo</a></td></tr>
<tr><td><a href="#">Bonnano</a></td></tr>
<tr><td><a href="#">Luchhese</a></td></tr>
</table>
</li>
and this is some javascript code i used for the hiding and the showing of the table
这是我用于隐藏和显示表格的一些 javascript 代码
<script language="javascript">
function showMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hideMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
regards Arian
问候阿里安
回答by James Allardice
You need to apply the same CSS you are applying via JavaScript to the table itself:
您需要将通过 JavaScript 应用到表本身的 CSS 应用到表本身：
#families { visibility:hidden }
or, using inline CSS:
或者，使用内联 CSS：
<table style="visibility:hidden" class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
...
</table>
Note that by using the visibilityproperty, the element will still take up space in the document. If you don't want that, you need the displayproperty instead:
请注意，通过使用该visibility属性，该元素仍将占用文档中的空间。如果您不想要那样，则需要该display属性：
#families { display:none }
回答by MLS
Use style.display="none"and style.display="block".
使用style.display="none"和style.display="block"。
回答by Yatish
add:
添加：
style="display:none;"
style="display:none;"
in table declaration
在表声明中
then in javascript:
然后在javascript中：
window.onload = name('families');
function name(form){
document.getElementById(elmnt).style.visibility="none";
}
回答by Shiv Raj
<html>
<head>
<style>
#families{
visibility:hidden;
}
</style>
<script language="javascript">
function showMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hideMenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<li onmouseout="hideMenu('families')" onmouseover="showMenu('families')" ><a href="#">Five Families</a></li>
<table class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
<tr><td><a href="#">Gambino</a></td></tr>
<tr><td><a href="#">Genovese</a></td></tr>
<tr><td><a href="#">Colombo</a></td></tr>
<tr><td><a href="#">Bonnano</a></td></tr>
<tr><td><a href="#">Luchhese</a></td></tr>
</table>
</body>
</html>回答by Drake
<li style="visibility:visible;"
or make a css file for a class such as
或为类创建一个 css 文件，例如
.demo
{
visibility:visible;
}
<li class="demo" style="visibility:visible;"
回答by EdoDodo
Add this attribute to the <body>tag of your HTML page: onload="hideMenu('families')"
将此属性添加到<body>HTML 页面的标记中：onload="hideMenu('families')"
This is a better solution than simply setting the style to be hidden, since for users without JavaScript, this code will never execute so the table will not be hidden.
这是比简单地将样式设置为隐藏更好的解决方案，因为对于没有 JavaScript 的用户，此代码将永远不会执行，因此表格不会被隐藏。
If you simply set the style to be hidden, the table would be permanently hidden to any users without JavaScript.
如果您简单地将样式设置为隐藏，则该表格将对任何没有 JavaScript 的用户永久隐藏。
