File "test01.php"
Full Path: /home/analogde/www/aaa/2024_PHP_08_02_2025/affichahe _expand_collpase_tableau/test01.php
File size: 3.93 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau avec Expand/Collapse</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.hidden-row {
display: none;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2 class="text-center mb-4">Tableau des Fichiers</h2>
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>Nom du Fichier</th>
<th>Taille (octets)</th>
<th>Date de Création</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
// Tableau des données
$data = [
"0filtre_P1000118.jpg" => [
[
"file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/0filtre_P1000118.jpg",
"size" => 119005,
"creation_date" => "2025-01-06 22:40:26"
]
],
"1105655.jpg" => [
[
"file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v1.jpg",
"size" => 262301,
"creation_date" => "2025-01-06 22:50:11"
],
[
"file_name" => "/home/analogde//www/Document_workarea/patrice/plouf/1105655_v2.jpg",
"size" => 262301,
"creation_date" => "2025-01-07 22:34:30"
]
],
// Ajoute d'autres fichiers...
];
foreach ($data as $mainFile => $details) {
$rowId = md5($mainFile); // Identifiant unique pour les lignes
// Première ligne (fichier principal)
echo "<tr>";
echo "<td>{$mainFile}</td>";
echo "<td>" . $details[0]['size'] . "</td>";
echo "<td>" . $details[0]['creation_date'] . "</td>";
if (count($details) > 1) {
echo "<td><button class='btn btn-primary btn-sm toggle-btn' data-target='{$rowId}'>Expand</button></td>";
} else {
echo "<td>-</td>";
}
echo "</tr>";
// Lignes supplémentaires (fichiers secondaires)
foreach ($details as $index => $fileInfo) {
if ($index > 0) { // Ignorer la première ligne (déjà affichée)
echo "<tr class='hidden-row {$rowId}'>";
echo "<td>{$fileInfo['file_name']}</td>";
echo "<td>{$fileInfo['size']}</td>";
echo "<td>{$fileInfo['creation_date']}</td>";
echo "<td>-</td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
<script>
// Script pour gérer l'expansion et la fermeture des lignes
document.querySelectorAll('.toggle-btn').forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-target');
const rows = document.querySelectorAll(`.${target}`);
rows.forEach(row => {
if (row.classList.contains('hidden-row')) {
row.classList.remove('hidden-row');
button.textContent = 'Collapse';
} else {
row.classList.add('hidden-row');
button.textContent = 'Expand';
}
});
});
});
</script>
</body>
</html>