javascript 显示/隐藏 HTML 表单的表格或 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9567658/
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
Show/hide tables or divs for a HTML form
提问by John Vasiliou
This was an answer I got recently but the topic has died down and I have a few more questions to ask about it:
这是我最近得到的一个答案，但这个话题已经消失了，我还有几个问题要问：
"That's quite a common request. Here is one way
“这是一个很常见的要求。这是一种方法
- Break your form in pages using
divs with easy to manageids and only the first one visible
- 使用
div易于管理的ids将您的表单分成页面，并且只有第一个可见
.
.
<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- NEXT button -->
<input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and NEXT buttons -->
<input type="button" value="back" onclick="pagechange(2,1);">
<input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and SUBMIT buttons -->
<input type="button" value="back" onclick="pagechange(10,9);">
<input type="submit" value="Submit">
</div>
- Use a simple JS function to switch between the pages
- 使用简单的JS函数在页面之间切换
.
.
function pagechange(frompage, topage) {
var page=document.getElementById('formpage_'+frompage);
if (!page) return false;
page.style.visibility='hidden';
page.style.display='none';
page=document.getElementById('formpage_'+topage);
if (!page) return false;
page.style.display='block';
page.style.visibility='visible';
return true;
}
Edit
编辑
If you want to use a table layout, break the for into more tables (one for each page) and give the ids to the tables instead of the divs"
如果您想使用表格布局，请将 for 分解为更多表格（每页一个）并将ids 赋予表格而不是divs"
Now the above works, when using divs, but when I use tables it doesn't work properly. The back, next buttons show all the time whether hidden or not and they always appear at the top. Any way to prevent this as I don't want to re-style everything now that I am using divs as opposed to tables.
现在上述工作，当使用 div 时，但当我使用表时，它不能正常工作。无论是否隐藏，后退、下一个按钮始终显示，并且它们始终显示在顶部。任何防止这种情况的方法，因为我现在不想重新设计所有内容，因为我使用的是 div 而不是表格。
Also when I click next and I'm at the bottom of a form it will take me to the middle/bottom of the next. Is there a way to link it to the top each time someone clicks back/next?
此外，当我单击下一步并在表单底部时，它会将我带到下一个的中间/底部。每次有人点击后退/下一步时，有没有办法将其链接到顶部？
回答by YangHongChang
perhaps it helps you?
也许它对你有帮助？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>
function pagechange(currentPage) {
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].id!=('formpage_'+(parseInt(currentPage)+1))){
divs[i].style.display="none";
divs[i].style.visibility='hidden';
}else{
divs[i].style.display="block";
divs[i].style.visibility='visible';
}
}
}
</script>
</head>
<body>
<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- NEXT button -->
<input type="button" value="next" onclick="pagechange(1);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and NEXT buttons -->
<input type="button" value="back" onclick="pagechange(0);">
<input type="button" value="next" onclick="pagechange(2);">
</div>
...
<div id="formpage_3" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and SUBMIT buttons -->
<input type="button" value="back" onclick="pagechange(1);">
<input type="submit" value="Submit">
</div>
</body>
</html>
回答by tony gil
this works quite nicely for tables (place this in headsection)
这对表格非常有效（将其放在head部分中）
<script>
function toggleTable() {
var myTable = document.getElementById("yourTable");
myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>
then place a button to toggle table display on and off
然后放置一个按钮来打开和关闭表格显示
<a id="toggleTableDisplay" onclick="toggleTable();" href="#">Show/Hide Table</a>
and the table definition
和表定义
<table id="yourTable">...</table>
