Afficher/masquer la table à l'aide du bouton dans la page php

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 intrants tels que du texte. La table de données est cacher par défaut. Et d'obtenir les valeurs du formulaire, et ensuite faire une requête dans la base de données et de les afficher en elle.

Comment puis-je réaliser la fonction d'afficher/cacher ?

Avez-vous des solutions?

Grâce.

  • Voulez-vous un AJAX (dans le navigateur de solution) ou PHP publication solution?
  • Le formulaire est soumis (c'est à dire changement de page/de rafraîchissement) ou voulez-vous ce sans changer de page?
  • Acutually je préfère utiliser ajax avec elle parce que je ne pas actualiser la page.
InformationsquelleAutor Jiangong SUN | 2009-12-02
  1. 4

    sa ajax simple question, vous pouvez utiliser n'importe quel script java de la bibliothèque pour obtenir cette fonctionnalité pour effectuer des appels ajax et afficher/masquer la table.
    par exemple, vous pouvez utiliser du jquery ajax fonctionnalités pour obtenir les données à partir du serveur, puis
    utilisation de jquery-effet intégré pour afficher le tableau ci-joint en div. Par exemple, pour afficher le contenu dans la div 'mydiv', il suffit d'écrire
    $("#mydiv").show(); Et pour masquer le contenu, écrire $("#mydiv").hide();

    InformationsquelleAutor Gripsoft
  2. 3

    Si vous êtes d'accord avec l'utilisation de Javascript, donner votre table tag un id attribut. Ensuite, avoir un onclick événement sur le bouton qui modifie le CSS de la table être display:none. Modifier le code Javascript du bouton afin que la prochaine fois il est cliqué, il bascule la table CSS être display:table. Vous pouvez également utiliser une bibliothèque Javascript, comme 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);
  }
}

    Prendre que le Javascript avec un grain de sel; je n'ai pas écrit tout en tout en.

    Si vous ne voulez pas utiliser de Javascript, alors le bouton soumettre régulièrement un formulaire HTML. Passer le long de la forme de certains de saisie du nom comme hide_table avec une valeur de true. Sur le serveur, si $_POST['hide_table'] == "true", ne pas permettre à la table de sortie au format HTML pour la page. Aussi, de changer la forme en cliquant sur le bouton soumettre 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 charger uniquement le contenu de la table lorsque l'utilisateur décide de le montrer, il serait sympa de faire ce dégrader gracieusement. Si un utilisateur n'a pas Javascript activé, le formulaire doit soumettre au serveur et de recharger la page, le basculement de l'affichage de la table. Toutefois, si l'utilisateur n'avoir Javascript activé, un appel AJAX pourrait être faite de la charge de la table, et de l'afficher sur place.

    InformationsquelleAutor Sarah Vessels
  3. 0

    En supposant que vous voulez faire de ce côté client (c'est à dire toutes les données sont envoyées au client au chargement de la page) tout ce que vous devez faire est quelque chose comme ceci: (fait avec un prototype pour des raisons de concision)

    ...
<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>
...
    InformationsquelleAutor Myles