Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Python
/
Monsta-FTP-master
/
affichahe _expand_collpase_tableau
:
test01.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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>