CODEWITHSUNDEEP
javascriptphp
Hajar lyoubi
Hajar lyoubi

Reputation: 23

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

I have an interface where there is a button. When I click on this button a table must be displayed. how can i do this ?

This is the code I've done :

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

Do I need to use a function in JS? or the function onclick?

Thanks in advance for your help.

Upvotes: 1

Views: 1833

Answers (3)

pk_
pk_

Reputation: 129

try like this sure it will work

 <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');
    });
});

Upvotes: 2

Siddharth Rathod
Siddharth Rathod

Reputation: 638

You can hide and show table using CSS applied using javascript

1, call hideShowTable() function in onclick button event

2, applied block hide or show CSS on click button

your final code like below

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>

Upvotes: 0

Javi
Javi

Reputation: 76

I would use a JS function to display the 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>

And then addd the script tag and following code:

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

Upvotes: 1

Related Questions