使用php頁面中的按鈕顯示/隱藏表格

Question

我想在同一PHP頁面中單擊一個按鈕時顯示數據表。 該按鈕與其他輸入（例如某些文本）一起使用。 數據表默認為隱藏。 然后從表單中獲取值，然后在數據庫中進行查詢並在其中顯示它們。

如何實現顯示/隱藏功能？

你有什么解決方案？

謝謝。

Answer 1

它是一個簡單的ajax問題，您可以使用任何流行的Java腳本庫來實現此功能以執行ajax調用和顯示/隱藏表。 例如，您可以使用jquery的ajax功能從服務器獲取數據，然后使用jquery的內置效果顯示div中包含的表。 例如，要在div'mydiv'中顯示內容，只需編寫$("#mydiv").show(); 要隱藏內容，請寫$("#mydiv").hide();

Answer 2

如果您可以使用Java腳本，可以給table標簽設置id屬性。 然后，在按鈕上產生一個onclick事件，該事件會將table的CSS更改為display:none 。 更改按鈕的Javascript，以便下次單擊該按鈕時，會將table CSS切換為display:table 。 您也可以使用Java庫（例如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輸出到頁面。 另外，切換表單，使單擊按鈕將提交false值的hide_table 。

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