Question

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

<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>

Answer 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/

Answer 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'>

按下提交按钮时显示表格

2 个答案: