Show / Hide tabela usando o botão na página php

Question

Eu quero mostrar uma tabela de dados quando eu clicar em um botão na mesma página php. O botão é usado em um formulário com outros insumos, como algum texto. A tabela de dados é esconder por padrão. E obter os valores do formulário, e em seguida, fazer uma consulta no banco de dados e exibi-los na mesma.

Como posso conseguir a função de display / esconder?

Você tem alguma solução?

Graças.

Answer 1

é um problema ajax simples, você pode usar qualquer biblioteca java script popular para atingir essa funcionalidade para realizar chamadas Ajax e mostrar / ocultar a tabela. por exemplo, você pode usar a funcionalidade de ajax do jQuery para obter os dados do servidor e, em seguida, usar jQuery é construído em efeitos para mostrar a tabela anexa no div. Por exemplo, para exibir o conteúdo no 'mydiv' div, basta escrever $("#mydiv").show(); E para ocultar o conteúdo, gravação $("#mydiv").hide();

Answer 2

Se você está bem com o uso de Javascript, dar o seu tag table um atributo id. Então, ter um evento onclick no botão que altera o CSS do table ser display:none. Alterar o Javascript do botão para que a próxima vez que for clicado, ele alterna a CSS table ser display:table. Você também pode usar uma biblioteca Javascript, como Prototype , para fazer isso.

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

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

E o Javascript pode 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 esse Javascript com um grão de sal; Não tenho escrito qualquer em quando.

Se você não quiser usar Javascript, em seguida, ter o botão enviar um formulário HTML regular. Passar ao longo na forma alguma nome de entrada, tais como hide_table com um valor de true. No servidor, se $_POST['hide_table'] == "true", não permitem que a tabela seja de saída como HTML para a página. Além disso, alternar a forma tal que, ao clicar no botão apresentará hide_table com um 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 } ?>

Se você quiser usar AJAX para carregar apenas o conteúdo da tabela quando o usuário decide mostrar isso, seria bom para fazer este degradar graciosamente. Se um usuário não ter o Javascript ativado, o formulário deve realmente enviar para o servidor e recarregar a página, alternando a exibição da tabela. No entanto, se o usuário tem o JavaScript habilitado, uma chamada de AJAX poderia ser feito, carregar a tabela, e exibi-lo no local.

Answer 3

Supondo que você quer fazer isso do lado do cliente (dados ou seja, todos são enviados para o cliente no carregamento da página) tudo o que você precisa fazer é algo assim: (feito com protótipo para brevidade)

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