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