Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Freebox
/
Improve
:
T_004.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>Table Interactif</title> <style> table { border-collapse: collapse; margin: 20px 0; width: 100%; max-width: 600px; } th, td { border: 1px solid #000; text-align: center; padding: 8px; cursor: pointer; } .active { background-color: #4caf50; color: white; } button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <table id="interactiveTable"> <thead> <tr> <th>pipo</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> <button id="saveButton">Sauvegarder</button> <button id="loadButton">Charger</button> <script> const table = document.getElementById('interactiveTable'); // Gestion du clic sur les cellules table.addEventListener('click', (event) => { const cell = event.target; // Vérifier si l'élément cliqué est une cellule (td) et non un header (th) if (cell.tagName === 'TD') { if (cell.textContent === '0') { cell.textContent = '1'; cell.classList.add('active'); } else if (cell.textContent === '1') { cell.textContent = '0'; cell.classList.remove('active'); } } }); // Bouton de sauvegarde const saveButton = document.getElementById('saveButton'); saveButton.addEventListener('click', () => { const rows = Array.from(table.querySelectorAll('tbody tr')); const state = rows.map(row => Array.from(row.querySelectorAll('td')).map(cell => cell.textContent) ); // Envoi des données au serveur avec XMLHttpRequest const xhr = new XMLHttpRequest(); xhr.open('POST', '/save-table', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { alert('Données sauvegardées avec succès sur le serveur.'); } else { alert('Échec de la sauvegarde des données.'); } } }; xhr.send(JSON.stringify({ tableState: state })); }); // Bouton de chargement const loadButton = document.getElementById('loadButton'); loadButton.addEventListener('click', () => { const xhr = new XMLHttpRequest(); xhr.open('GET', 'load-table.php', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { const response = JSON.parse(xhr.responseText); const state = response.tableState; // Remplir le tableau avec les données chargées const rows = table.querySelectorAll('tbody tr'); state.forEach((rowState, rowIndex) => { const cells = rows[rowIndex].querySelectorAll('td'); rowState.forEach((cellState, cellIndex) => { const cell = cells[cellIndex]; cell.textContent = cellState; if (cellState === '1') { cell.classList.add('active'); } else { cell.classList.remove('active'); } }); }); alert('Données chargées avec succès.'); } else { alert('Échec du chargement des données.'); } } }; xhr.send(); }); </script> </body> </html>