Mostrar/ocultar tabla usando el botón en la página PHP

Question

Quiero mostrar una tabla de datos cuando hago clic en un botón en la misma página PHP.El botón se utiliza en un formulario con otras entradas, como algo de texto.La tabla de datos está oculta de forma predeterminada.Y obtiene los valores del formulario, luego realiza una consulta en la base de datos y los muestra en ella.

¿Cómo puedo lograr la función de mostrar/ocultar?

¿Tiene alguna solución?

Gracias.

Answer 1

es un tema ajax simple, se puede utilizar cualquier biblioteca de java script populares para conseguir esta funcionalidad para realizar llamadas ajax y mesa mostrar / ocultar. por ejemplo, se puede utilizar la funcionalidad de ajax de jQuery para obtener los datos desde el servidor y luego utilizar jQuery de efectos incorporados para mostrar la tabla adjunta en div. Por ejemplo, para mostrar el contenido en el div 'mydiv', sólo tiene que escribir  $("#mydiv").show(); Y para ocultar el contenido, escriba $("#mydiv").hide();

Answer 2

Si estás de acuerdo con el uso de Javascript, y comparte sus etiquetas table un atributo id. Entonces, tener un evento onclick en el botón que altera el CSS de la table que se display:none. Alterar el Javascript del botón de modo que la próxima vez que se hace clic, se alterna el CSS table ser display:table. También es posible usar una biblioteca de Javascript, como Prototipo , para hacer esto.

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

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

Y el Javascript podría ser:

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

Tome Javascript que con un grano de sal; No he escrito ninguna desde hace tiempo.

Si no desea utilizar Javascript, a continuación, tienen el botón de enviar un formulario HTML normal. Pasar a lo largo en forma algún nombre de entrada tal como hide_table con un valor de true. En el servidor, si $_POST['hide_table'] == "true", no permiten que la tabla sea de salida como HTML de la página. Además, cambiar la forma de tal manera que al hacer clic en el botón presentará hide_table con un valor 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 quieres usar AJAX sólo para cargar el contenido de la tabla cuando el usuario decide mostrarlo, sería bueno para hacer de este poder funcionar fácilmente. Si un usuario no tiene Javascript habilitado, la forma en realidad debería enviar al servidor y volver a cargar la página, cambiar la visualización mesa. Sin embargo, si el usuario no tiene Javascript habilitado, se podría hacer una llamada AJAX, cargar la tabla, y mostrarlo en el lugar.

Answer 3

Si se asume que usted quiere hacer este lado del cliente (es decir, todos los datos se envían al cliente al cargar la página) todo lo que necesita hacer es algo así: (hecho con prototipo para abreviar)

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