按下提交按钮时显示表格答案

【问题标题】：Show table when submit button pressed按下提交按钮时显示表格
【发布时间】：2014-04-24 16:36:04
【问题描述】：

我的页面上有一个表格，我想知道是否可以隐藏一个表格，然后在单击按钮时显示？我的桌子：

<table border="5",th,td, cellspacing="5", cellpadding="5", width="500", align="center">
            <tr>
                <th>TP ID</th>
                <th>Permit Deny</th>
                <th>Level</th>
                <th>Session</th>
                <th>Information Specialist</th>
            </tr>

            <?php foreach ($results as $row): ?>

            <tr>
                <td><?php echo $row->TP_ID ?></td>
                <td><?php echo $row->Permit_or_Deny ?></td>
                <td><?php echo $row->Level ?></td>
                <td><?php echo $row->Session ?></td>
                <td><?php echo $row->Information_specialist ?></td>
                </tr>
            <?php endforeach ?>

        </table>

【问题讨论】：

是的，通过使用 Javascript 或 jQuery

标签： html button html-table

【解决方案1】：

这两种方式可以实现，第一种是使用PHP：

<?php
$action = $_GET['action'];
if ($action == "table") {
echo "Your table goes here"; //The table you want to display
}
else
{
echo '<html><form action="?action=table"><input type="submit" value="Submit"></form>'; //The submit button
}
?>

第二种方法是使用带有jQuery的javascript：

HTML：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<button href="#collapse" class="nav-toggle">Show</button>
<div id="collapse" style="display:none">
    <p>Your Table Goes Here</p>
</div>

JS：

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        var collapse_content_selector = $(this).attr('href');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function () {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show');
            } else {
                toggle_switch.html('Hide');
            }
        });
    });

});

JSFiddle：http://jsfiddle.net/Starfire1337/33ygT/

【讨论】：

【解决方案2】：

使用 jquery 你可以做这样的事情：http://jsfiddle.net/vVsAn/2113/

jquery：

 $('#showHide').live('click', function(event) {        
         $('#hideShowDiv').toggle('hide');
    });

HTML：

<div id='hideShowDiv'>
    Put your table inside a div <br />
</div>
<input type='button' id='showHide' value='hide/show'>

【讨论】：

谢谢！但是我将表格从默认中隐藏然后显示？
那么您需要做的就是将 div 的样式设置为display:none;，然后您将拥有.toggle('hide'); 而不是.toggle('show');