单击 php 中的按钮后如何显示 table

Question

我有一个界面，其中有一个按钮。当我单击此按钮时，必须显示 table。我该怎么做？

这是我完成的代码：

//This is the button  
 
<div class="panel-body">
                <p><button type="button" class="btn btn-lg btn-default" id ="parser" name="parser" onclick="" >Parser</button></p>
                </div>

//The table I need to display 
<table class="table table-striped table-bordered table-hover" id="matable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>ATM</th>
                                            <th>Ligne</th>
                                            <th>Event</th>
                                            <th>Montant</th>
                                            <th>Type</th>
                                            <th>Retour trans</th>
                                            <th>Retour carte</th>
                                            <th>Carte insérée</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <?php
                                    while($row=mysqli_fetch_row($res)){ 
                                    
                                    
                                        ?>
                                        <tr>
                                            <td><?php echo $row[0] ?></td>
                                            <td><?php echo $row[5] ?></td>
                                            <td><?php echo $row[1] ?></td>
                                            <td><?php echo $row[2] ?></td>
                                            <td><?php echo $row[6] ?></td>
                                            <td><?php echo $row[8] ?></td>
                                            <td><?php echo $row[9] ?></td>
                                            <td><?php echo $row[10] ?></td>
                                            <td><?php echo $row[11] ?></td>
                                            <td><?php echo $row[12] ?></td>
                                        </tr>
                                    <?php }?>
                                    </tbody>
                                </table>

需要在JS中使用函数吗？或者函数 onclick?

在此先感谢您的帮助。

Answer 1

我会使用 JS 函数来显示 table:

<div class="panel-body">
            <p><button type="button" class="btn btn-lg btn-default" id ="parser" name="parser" onclick="showTable()" >Parser</button></p>
            </div>

然后添加脚本标签和以下代码：

<script>
function showTable() {
        document.getElementById("matable").style.display = "block";
}
</script>

Answer 2

您可以使用 javascript

应用 CSS 隐藏和显示 table

1、在onclick按钮事件中调用hideShowTable()函数

2，在单击按钮时应用块隐藏或显示 CSS

你的最终代码如下

function hideShowTable(){
    let toggle = document.getElementById("matable").style.display;
    if(toggle == "none"){
        document.getElementById("matable").style.display = "block";
    } else {
        document.getElementById("matable").style.display = "none";
    }

}

<div class="panel-body">
    <p><button type="button" class="btn btn-lg btn-default" id="parser" name="parser" onclick="hideShowTable();">Parser</button></p>
</div>
<table class="table table-striped table-bordered table-hover" id="matable" style="display:none;">
    <thead>
        <tr>
            <th>#</th>
            <th>Date</th>
            <th>ATM</th>
            <th>Ligne</th>
            <th>Event</th>
            <th>Montant</th>
            <th>Type</th>
            <th>Retour trans</th>
            <th>Retour carte</th>
            <th>Carte insérée</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>10/10/22</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>                    
        </tr>
        <tr>
            <td>1</td>
            <td>10/10/22</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>                    
        </tr>
        <tr>
            <td>1</td>
            <td>10/10/22</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>                    
        </tr>
        <tr>
            <td>1</td>
            <td>10/10/22</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>                    
        </tr>
        <tr>
            <td>1</td>
            <td>10/10/22</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>                    
        </tr>
    </tbody>
</table>

Answer 3

像这样尝试肯定会成功

 <style>
    .hidden{
        display: none;
    }
</style>
<div class="panel-body">
<p><button type="button" class="btn btn-lg btn-default" id ="parser" name="parser" >Parser</button></p>
</div>
<table class="table table-striped table-bordered table-hover hidden" id="matable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>ATM</th>
                                            <th>Ligne</th>
                                            <th>Event</th>
                                            <th>Montant</th>
                                            <th>Type</th>
                                            <th>Retour trans</th>
                                            <th>Retour carte</th>
                                            <th>Carte insérée</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    
                                    <?php
                                    while($row=mysqli_fetch_row($res)){ 
                                    
                                    
                                        ?>
                                        <tr>
                                        <td><?php echo $row[0] ?></td>
                                            <td><?php echo $row[5] ?></td>
                                            <td><?php echo $row[1] ?></td>
                                            <td><?php echo $row[2] ?></td>
                                            <td><?php echo $row[6] ?></td>
                                            <td><?php echo $row[8] ?></td>
                                            <td><?php echo $row[9] ?></td>
                                            <td><?php echo $row[10] ?></td>
                                            <td><?php echo $row[11] ?></td>
                                            <td><?php echo $row[12] ?></td>
                                        </tr>
                                        <?php }?>
                                    </tbody>
                                </table>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/3.2.1/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){ 
        $(document).on('click', '#parser', function(){
            $("#matable").removeClass('hidden');
    });
});

单击 php 中的按钮后如何显示 table

how to display a table after i click on a button in php

javascript

php