Question

这是我最近得到的答案，但主题已经消失，我还有一些问题要问：

“这是一个非常常见的请求。这是一种方式

使用div s在页面中打破您的表单，并且易于管理id，只有第一个可见

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

使用简单的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;
}

修改

如果您想使用表格布局，请将for分成更多表格（每页一个），并将id提供给表格而不是div s“

现在上面的工作，当使用div时，但当我使用表时，它无法正常工作。后面，下一个按钮显示所有时间是否隐藏，它们总是出现在顶部。任何防止这种情况的方法，因为我不想重新设置所有内容，因为我使用的是div而不是表格。

当我点击下一个并且我在表格的底部时，它会将我带到下一个的中间/底部。每次有人点击/下一次时，有没有办法将它链接到顶部？

Answer 1

也许对你有所帮助？

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

Answer 2

这非常适合表格（将其放在head部分）

<script>
function toggleTable() {
    var myTable = document.getElementById("yourTable");
    myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>

然后放置一个按钮以打开和关闭表格显示

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

和表定义

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

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

2 个答案: