1

当我单击同一 php 页面中的按钮时，我想显示一个数据表。该按钮用于具有其他输入（例如某些文本）的表单中。数据表默认隐藏。它从表单中获取值，然后在数据库中进行查询并在其中显示它们。

如何实现显示/隐藏的功能？

你有什么解决办法？

谢谢。

4

3 回答 3

4

这是一个简单的 ajax 问题，您可以使用任何流行的 java 脚本库来实现此功能来执行 ajax 调用和显示/隐藏表。例如，您可以使用 jquery 的 ajax 功能从服务器获取数据，然后使用 jquery 的内置效果来显示包含在 div 中的表。例如，要显示 div 'mydiv' 中 $("#mydiv").show();的内容，只需写 和隐藏内容，写$("#mydiv").hide();

于 2009-12-02T18:25:30.090 回答
3

如果您可以使用 Javascript，请为您的table标签添加一个id属性。然后，onclick在按钮上设置一个事件，将 的 CSS 更改table为display:none。更改按钮的 Javascript 以便下次单击它时，它会将tableCSS 切换为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 调用，加载表格并就地显示它。

于 2009-12-02T18:25:35.677 回答
0

假设您想要做这个客户端（即所有数据在页面加载时发送到客户端），那么您需要做的就是：（为简洁起见，使用原型完成）

...
<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>
...
于 2009-12-02T18:31:53.297 回答