Показать / скрыть таблицу с помощью кнопки на странице php - PullRequest
Новая
       29

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

1 голос
/ 02 декабря 2009

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

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

У вас есть какие-нибудь решения?

Спасибо.

Ответы [ 3 ]

4 голосов
/ 02 декабря 2009

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

3 голосов
/ 02 декабря 2009

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

<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, загрузить таблицу и отобразить ее на месте.

0 голосов
/ 02 декабря 2009

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

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