使用按钮在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>
...