Fatal编程技术网
  • javascript/
  • Javascript 显示/隐藏HTML表单的表或div

Javascript 显示/隐藏HTML表单的表或div

javascript html forms

Javascript 显示/隐藏HTML表单的表或div,javascript,html,forms,tabular,Javascript,Html,Forms,Tabular,这是我最近得到的一个答案，但这个话题已经淡出，我还有几个问题要问： “这是一个很常见的要求。这里有一个方法 使用易于管理的ids，使用divs将表单拆分为多个页面，并且只显示第一个页面 编辑 如果要使用表格布局，请将for拆分为多个表格（每页一个），并为表格指定ids，而不是divs 现在，当使用div时，上面的方法可以工作，但是当我使用表时，它不能正常工作。“后退”、“下一步”按钮始终显示是否隐藏，并且始终显示在顶部。有没有办法防止这种情况发生，因为我现在使用div而不是表，所以我不想重

这是我最近得到的一个答案，但这个话题已经淡出，我还有几个问题要问：

“这是一个很常见的要求。这里有一个方法

  • 使用易于管理的
    id
    s，使用
    div
    s将表单拆分为多个页面，并且只显示第一个页面

编辑

如果要使用表格布局，请将for拆分为多个表格（每页一个），并为表格指定
id
s，而不是
div
s

现在，当使用div时，上面的方法可以工作，但是当我使用表时，它不能正常工作。“后退”、“下一步”按钮始终显示是否隐藏，并且始终显示在顶部。有没有办法防止这种情况发生，因为我现在使用div而不是表，所以我不想重新设置所有内容的样式

此外，当我单击“下一步”时，我位于表单的底部，它会将我带到下一个表单的中间/底部。每次有人单击“上一步/下一步”时，是否有办法将其链接到顶部？

也许这对您有帮助

<!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>


新文件
功能页面更改（当前页面）{
var divs=document.getElementsByTagName（“div”）；
对于（var i=0；i
..
..
...
..
..
也许这对你有帮助

<!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>


新文件
功能页面更改（当前页面）{
var divs=document.getElementsByTagName（“div”）；
对于（var i=0；i
..
..
...
..
..
这对表格非常有效（请将其放在
标题
部分）


函数切换表（）{
var myTable=document.getElementById（“yourTable”）；
myTable.style.display=（myTable.style.display=“表格”）？“无”：“表格”；
}
然后放置一个按钮以打开和关闭表格显示

<a id="toggleTableDisplay" onclick="toggleTable();" href="#">Show/Hide Table</a>
和表定义

<table id="yourTable">...</table>

。。。
这对表格非常有效（请将其放在
标题
部分）


函数切换表（）{
var myTable=document.getElementById（“yourTable”）；
myTable.style.display=（myTable.style.display=“表格”）？“无”：“表格”；
}
然后放置一个按钮以打开和关闭表格显示

<a id="toggleTableDisplay" onclick="toggleTable();" href="#">Show/Hide Table</a>
和表定义

<table id="yourTable">...</table>

。。。
我强烈建议您删除所有可见性用法，只使用显示，反之亦然。仅当您希望隐藏的项目占用页面空间时才使用可见性是的，似乎不需要，所以我刚刚删除了它。谢谢。希望这不会影响任何事，因为一切看起来都很好：）那么如何显示和隐藏表格部分呢？如果必须使用表格，我建议您在行中添加ID并隐藏/显示这些ID（不推荐）我强烈建议您删除所有可见性用法，只使用显示，反之亦然。仅当您希望隐藏的项目占用页面空间时才使用可见性是的，似乎不需要，所以我刚刚删除了它。谢谢。希望这不会影响任何事，因为一切看起来都很好：）那么如何显示和隐藏表格部分呢？我建议您在行中添加ID并隐藏/显示这些ID，如果您必须使用表格（不推荐）我来自中国，我的QQ帐户243030330I来自中国，我的QQ帐户243030330I如果您想从隐藏表格开始
，如果您想从隐藏表格开始