php 使用php页面中的按钮显示/隐藏表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1834822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide table using button in php page
提问by SUN Jiangong
I want to display a data table when i click a button in the same php page. The button is used in a form with other inputs such as some text. The data table is hide by default. And it get the values from the form, and then make a query in database and display them in it.
当我单击同一 php 页面中的按钮时，我想显示一个数据表。该按钮与其他输入（例如某些文本）一起用于表单中。数据表默认是隐藏的。它从表单中获取值，然后在数据库中进行查询并在其中显示它们。
How can i achieve the function of display/hide ?
如何实现显示/隐藏功能？
Do you have any solutions?
你有什么解决方案？
Thanks.
谢谢。
回答by Gripsoft
its a simple ajax issue, you can use any popular java script library to achieve this functionality to perform ajax calls and show/hide table.
for example, you can use jquery's ajax functionality to get the data from the server and then
use jquery's built in effects to show the table enclosed in div. For example, to display the content in the div 'mydiv', simply write
$("#mydiv").show();And to hide the content, write $("#mydiv").hide();
这是一个简单的 ajax 问题，您可以使用任何流行的 java 脚本库来实现此功能来执行 ajax 调用和显示/隐藏表。例如，您可以使用 jquery 的 ajax 功能从服务器获取数据，然后使用 jquery 的内置效果来显示包含在 div 中的表。例如，要显示 div 'mydiv' 中$("#mydiv").show();的内容，只需写
并且要隐藏内容，写$("#mydiv").hide();
回答by Sarah Vessels
If you're okay with using Javascript, give your tabletag an idattribute. Then, have an onclickevent on the button that alters the CSS of the tableto be display:none. Alter the Javascript of the button so that the next time it is clicked, it toggles the tableCSS to be display:table. You could also use a Javascript library, such as Prototype, to do this.
如果您可以使用 Javascript，请为您的table标签指定一个id属性。然后，onclick在按钮上设置一个事件，将 .css 的 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" />
And the Javascript might be:
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);
}
}
Take that Javascript with a grain of salt; I haven't written any in a while.
对 Javascript 持保留态度；好久没写东西了
If you don't want to use Javascript, then have the button submit a regular HTML form. Pass along in the form some input name such as hide_tablewith a value of true. On the server, if $_POST['hide_table'] == "true", don't allow the table to be output as HTML to the page. Also, toggle the form such that clicking the button will submit hide_tablewith a value of false.
如果您不想使用 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 } ?>
If you wanted to use AJAX to only load the table content when the user decides to show it, it would be nice to make this degrade gracefully. If a user doesn't have Javascript enabled, the form should actually submit to the server and reload the page, toggling the table display. However, if the user does have Javascript enabled, an AJAX call could be made, load the table, and display it in-place.
如果您想使用 AJAX 仅在用户决定显示表格内容时加载它，那么优雅地降级会很好。如果用户没有启用 Javascript，表单实际上应该提交到服务器并重新加载页面，切换表格显示。但是，如果用户确实启用了 Javascript，则可以进行 AJAX 调用、加载表并就地显示它。
回答by Myles
Assuming that you want to do this client side (ie all data is sent to the client on page load) all you need to do is something thusly: (done with prototype for brevity)
假设您想要执行此客户端（即所有数据在页面加载时发送到客户端），您需要做的就是这样：（为简洁起见，使用原型完成）
...
<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>
...
