Afficher/masquer le tableau à l'aide d'un bouton dans une page php

Question

Je veux afficher un tableau de données lorsque je clique sur un bouton dans la même page php. Le bouton est utilisé dans un formulaire avec d'autres entrées comme du texte. Le tableau de données est caché par défaut. Elle récupère les valeurs du formulaire, puis effectue une requête dans la base de données et les affiche.

Comment puis-je réaliser la fonction d'affichage/masquage ?

Avez-vous des solutions ?

Gracias.

Answer 1

C'est un simple problème d'ajax, vous pouvez utiliser n'importe quelle bibliothèque java script populaire pour réaliser cette fonctionnalité pour effectuer des appels ajax et afficher/masquer la table. par exemple, vous pouvez utiliser la fonctionnalité ajax de jquery pour obtenir les données du serveur, puis utiliser les effets intégrés de jquery pour afficher le tableau inclus dans un div. Par exemple, pour afficher le contenu de la division 'mydiv', il suffit d'écrire $("#mydiv").show(); Et pour cacher le contenu, écrivez $("#mydiv").hide();

Answer 2

Si vous n'avez pas de problème à utiliser le Javascript, donnez à votre table taguer un id attribut. Ensuite, il faut avoir un onclick sur le bouton qui modifie le CSS de l'écran. table à être display:none . Modifiez le Javascript du bouton de façon à ce que la prochaine fois qu'il est cliqué, il fasse basculer l'écran de l'ordinateur. table CSS à être display:table . Vous pouvez également utiliser une bibliothèque Javascript, telle que Prototype pour ce faire.

<table id="myTable">
</table>

<input id="toggleButton" type="button" onclick="hideTable(true);" value="Toggle Table" />

Et le Javascript pourrait être :

function toggleDisplay(var hide) {
  if (hide) {
    document.getElementById('myTable').style.display = "none";
    document.getElementById('toggleButton').onclick = hideTable(false);
  } else {
    document.getElementById('myTable').style.display = "table";
    document.getElementById('toggleButton').onclick = hideTable(true);
  }
}

Prenez ce Javascript avec un grain de sel ; je n'en ai pas écrit depuis un moment.

Si vous ne voulez pas utiliser Javascript, faites en sorte que le bouton soumette un formulaire HTML ordinaire. Transmettez dans le formulaire un nom d'entrée tel que hide_table avec une valeur de true . Sur le serveur, si $_POST['hide_table'] == "true" ne permettent pas la sortie du tableau en tant que HTML sur la page. De plus, il faut basculer le formulaire de façon à ce que le fait de cliquer sur le bouton soumette le formulaire. hide_table avec une valeur de false .

<form method="post" action="the_same_page.php">
  <input type="hidden" name="hide_table" value="<?php echo $_POST['hide_table'] == "true" ?>" />
  <input type="button" value="Toggle Table" />
</form>

<?php if ($_POST['hide_table'] != "true") { ?>
  <table>
  </table>
<?php } ?>

Si vous souhaitez utiliser AJAX pour ne charger le contenu du tableau que lorsque l'utilisateur décide de l'afficher, il serait bon de faire en sorte que cela se dégrade progressivement. Si l'utilisateur n'a pas activé Javascript, le formulaire doit être soumis au serveur et recharger la page, en changeant l'affichage du tableau. Toutefois, si l'utilisateur a activé Javascript, un appel AJAX pourrait être effectué, charger le tableau et l'afficher sur place.

Answer 3

En supposant que vous voulez faire cela côté client (c'est-à-dire que toutes les données sont envoyées au client au chargement de la page), tout ce que vous devez faire est quelque chose comme : (fait avec le prototype pour la brièveté)

...
<input type="button" id="showTableBtn" value="Show Table">
<table id="dataTable">
    ...
</table>

<script type="text/javascript">
<!--
Event.observe($("showTableBtn"), "click", toggleTable);

function toggleTable() {
    if ($("showTableBtn").value == "Show Table") {
         $("dataTable").show();
         $("showTableBtn").value = "Hide Table";
    } else {
         $("dataTable").hide();
         $("showTableBtn").value = "Show Table");
    }
}

//-->
</script>
...