Afficher/masquer les tables ou les divs pour un formulaire HTML

C'était une réponse que j'ai eue récemment, mais le sujet a disparu et j'ai quelques questions à poser à ce sujet:

"C'est une demande commune. Voici une façon de

  • Casser votre formulaire dans les pages à l'aide de divs avec facile à gérer ids et seulement le premier visible

.

<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>
  • Utiliser un simple JS fonction pour basculer entre les pages

.

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

Modifier

Si vous souhaitez utiliser un tableau de mise en page, pause le pour dans plusieurs tables (une pour chaque page) et donner la ids tables à la place de la divs"

Maintenant les travaux ci-dessus, lors de l'utilisation de divs, mais quand j'utilise les tables ne fonctionne pas correctement. Le dos, à côté des boutons de montrer tout le temps, qu'ils soient masqués ou non, et ils apparaissent toujours en haut. De toute façon, pour éviter ce que je ne veux pas re-style tout maintenant que je suis en utilisant des divs, par opposition à des tables.

Aussi quand je clique sur suivant et je suis au fond d'un formulaire qu'il va me prendre pour le milieu/bas de l'autre. Est-il un moyen de lier vers le haut chaque fois que quelqu'un clique sur précédent/suivant?

  • Je vous suggère fortement de supprimer tous visibilité d'utilisation et d'utiliser uniquement de l'affichage ou vice versa. La visibilité n'est utilisée que si vous souhaitez que les éléments cachés de l'espace dans la page
  • yep, semble fonctionner sans ive vient de retirer la grâce. J'espère que cela n'affecte pas rien comme tout cela semble très bien 🙂
  • Alors comment faire pour afficher et masquer la table des pièces? Je vous suggère d'ajouter des Identifiants pour les LIGNES et les afficher/masquer les ceux qui si vous DEVEZ utiliser des tableaux (non recommandé)
InformationsquelleAutor John Vasiliou | 2012-03-05
  1. 4

    peut-être que cela vous aide?

    <!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>
    • Je suis originaire de la chine ,de mon QQ compte 243030330
    InformationsquelleAutor YangHongChang
  2. 0

    cela fonctionne très bien pour les tables (les placer dans un headsection)

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

    puis placez un bouton pour basculer l'affichage des tables sur et en dehors

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

    et la définition de la table

    <table id="yourTable">...</table>
    • dans le cas où vous souhaitez commencer avec une table MASQUÉE <table id="yourTable" style="display: none">
    InformationsquelleAutor tony gil