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 >
<p><button type="button" id ="parser" name="parser" onclick="" >Parser</button></p>
</div>
//The table I need to display
<table 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.
CodePudding user response：
try like this sure it will work
<style>
.hidden{
display: none;
}
</style>
<div >
<p><button type="button" id ="parser" name="parser" >Parser</button></p>
</div>
<table 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');
});
});
CodePudding user response：
I would use a JS function to display the table:
<div >
<p><button type="button" 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>
CodePudding user response：
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 >
<p><button type="button" id="parser" name="parser" onclick="hideShowTable();">Parser</button></p>
</div>
<table 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>