Показать/скрыть таблицу с помощью кнопки на странице php

Question

Я хочу отображать таблицу данных, когда я нажимаю кнопку на той же странице php.Кнопка используется в форме с другими входными данными, такими как текст.Таблица данных по умолчанию скрыта.И он получает значения из формы, а затем делает запрос в базе данных и отображает их в ней.

Как я могу получить функцию отображения/скрытия?

Есть ли у вас какие-либо решения?

Спасибо.

Answer 1

это простая проблема ajax, вы можете использовать любую популярную библиотеку сценариев Java для достижения этой функциональности для выполнения вызовов ajax и отображения/скрытия таблицы.Например, вы можете использовать функциональность jQuery Ajax, чтобы получить данные с сервера, а затем использовать встроенные эффекты jQuery, чтобы показать таблицу, заключенную в Div.Например, чтобы отобразить содержимое div «mydiv», просто напишите $("#mydiv").show(); А чтобы скрыть контент, напишите $("#mydiv").hide();

Answer 2

Если вас устраивает использование Javascript, сообщите table отметить id атрибут.Затем onclick событие на кнопке, которое изменяет CSS table быть display:none.Измените Javascript кнопки так, чтобы при следующем нажатии на нее переключалось table CSS будет display:table.Вы также можете использовать библиотеку Javascript, например Опытный образец, сделать это.

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

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

И Javascript может быть:

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

Отнеситесь к этому Javascript с недоверием;Давно я ничего не писал.

Если вы не хотите использовать Javascript, попросите кнопку отправить обычную HTML-форму.Передайте в форме какое-нибудь входное имя, например hide_table со стоимостью true.На сервере, если $_POST['hide_table'] == "true", не разрешайте вывод таблицы на страницу в формате HTML.Кроме того, переключите форму так, чтобы нажатие кнопки отправляло hide_table со стоимостью 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 } ?>

Если вы хотите использовать AJAX для загрузки содержимого таблицы только тогда, когда пользователь решит его показать, было бы неплохо сделать это изящно.Если у пользователя не включен Javascript, форма должна фактически отправиться на сервер и перезагрузить страницу, переключив отображение таблицы.Однако если у пользователя включен Javascript, можно выполнить вызов AJAX, загрузить таблицу и отобразить ее на месте.

Answer 3

Предполагая, что вы хотите сделать это на стороне клиента (т. е. все данные отправляются клиенту при загрузке страницы), все, что вам нужно сделать, это следующее:(для краткости сделано с использованием прототипа)

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