1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
|
<?php
$bdd = new PDO('mysql:host=localhost;dbname=tp_php', 'root', '',array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
?>
<meta charset="utf8" />
<style>
._dev{
width: 150px;
display: block;
float: left;
text-align: right;
}
.b_insert{
width: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
.div_aff{
width: 100%;
height: 300px;
float: left;
border: 2px solid;
overflow:auto;
}
.t_tab{
width: 100%;
}
.t_tab th,.t_tab td{
text-align: center;
border: 1px solid;
}.t_tab th{
background: #ddd;
}
</style>
<table class="t_tab col-xs-6">
<thead><tr><th>id</th><th>cin</th><th>nom</th><th>prenom</th><th>sex</th><th>afficher</th></tr></thead>
<tbody>
<?php
$row=$bdd->query('select * from etat_civil')or die('<br>'.var_dump($bdd->errorInfo()));
while($d=$row->fetch())
echo '<tr><td>'.$d['id'].'</td><td>'.$d['CIN'].'</td><td>'.$d['NOM'].'</td><td>'.$d['PRENOM'].'</td><td>'.$d['SEX'].'</td>
<td><button data-id="'.$d['id'].'" class="b_aff">aficher</button></td></tr>';
?>
</tbody>
</table>
<div class="div_aff"></div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function f(div,id){
$.ajax({type:'GET',dataType:'json',url:'json.php?id='+id,success:function(data){
var x='<table class="t_tab t_tabi t_tab'+id+'"><thead><tr><th>id</th><th>cin</th><th>nom</th><th>prenom</th></tr></thead><tbody>';
for(var i=0;i<data.length;i++)
x+='<tr><td>'+data[i]['id']+'</td><td>'+data[i]['CIN']+'</td><td>'+data[i]['NOM']+'</td><td>'+data[i]['PRENOM']+'</td></tr>';
x+='</tbody></table>';
$('.t_tabi').remove();
$(div).append(x);
}});
}
$('.b_aff').click(function(){
f('.div_aff',$(this).attr('data-id'));
});
</script> |
Partager