Показать / скрыть таблицы или элементы div для формы HTML - PullRequest
Новая
       8

Показать / скрыть таблицы или элементы div для формы HTML

1 голос
/ 05 марта 2012

Это был ответ, который я получил недавно, но тема утихла, и у меня есть еще несколько вопросов по этому поводу:

"Это довольно распространенный запрос. Вот один из способов

  • Разбейте свою форму на страницах, используя div s с простыми в управлении id s и только первый видимый

. 

<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 s таблицам вместо div s "

Теперь вышеприведенное работает, когда используется div, но когда я используюТаблицы это не работает должным образом.Кнопки «Назад» и «Вперед» показывают, скрыты они или нет, и всегда отображаются сверху.Любой способ предотвратить это, так как я не хочу изменять стиль всего, теперь, когда я использую div в отличие от таблиц.

Также, когда я нажимаю "Далее" и я нахожусь в нижней части формы, это будетвозьми меня к середине / нижней части следующего.Есть ли способ связать его с вершиной каждый раз, когда кто-то нажимает назад / вперед?

Ответы [ 2 ]

4 голосов
/ 26 июня 2012

возможно тебе это поможет? 

<!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>
0 голосов
/ 05 октября 2015

это хорошо работает для таблиц (поместите в секцию 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>
...