Tiny File Manager

Back Back Up Advanced Editor

<?php

/*CREATE TABLE tableau_data (

id INT AUTO_INCREMENT PRIMARY KEY,

row_data TEXT NOT NULL

);*/

<!DOCTYPE html>

<head>

<title>Table Interactif avec DB</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>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

<button id="saveButton">Sauvegarder</button>

<button id="loadButton">Charger</button>

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');

}

});

// Sauvegarde dans la base de données via XMLHttpRequest

document.getElementById('dbButton').addEventListener('click', () => {

const rows = table.querySelectorAll('tbody tr');

const data = [];

rows.forEach(row => {

const rowData = [];

const cells = row.querySelectorAll('td');

cells.forEach(cell => {

rowData.push(cell.textContent);

});

data.push(rowData);

});

// Créer un objet XMLHttpRequest pour envoyer les données

const xhr = new XMLHttpRequest();

xhr.open('POST', 'saveToDB.php', true);

xhr.setRequestHeader('Content-Type', 'application/json');

// Quand la requête est terminée

xhr.onload = function() {

if (xhr.status === 200) {

alert(xhr.responseText); // Afficher la réponse du serveur

} else {

console.error('Erreur de sauvegarde:', xhr.status, xhr.statusText);

}

};

// Envoyer les données JSON au serveur

xhr.send(JSON.stringify(data));

});

// Charger les données depuis la base de données via XMLHttpRequest

document.getElementById('loadDBButton').addEventListener('click', () => {

const xhr = new XMLHttpRequest();

xhr.open('GET', 'loadFromDB.php', true);

// Quand la requête est terminée

xhr.onload = function() {

if (xhr.status === 200) {

const data = JSON.parse(xhr.responseText);

const rows = table.querySelectorAll('tbody tr');

const rowData = JSON.parse(data);

// Remplir le tableau avec les données récupérées

rowData.forEach((dataRow, rowIndex) => {

const row = rows[rowIndex] || table.insertRow();

dataRow.forEach((cellData, cellIndex) => {

const cell = row.cells[cellIndex] || row.insertCell();

cell.textContent = cellData;

cell.classList.remove('active'); // Réinitialiser la classe active

if (cellData === '1') {

cell.classList.add('active');

}

});

} else {

console.error('Erreur de chargement:', xhr.status, xhr.statusText);

}

};

// Envoyer la requête pour charger les données

xhr.send();

});*/

// Charger les données depuis la base de données via XMLHttpRequest

document.getElementById('loadDBButton').addEventListener('click', () => {

// Créer une nouvelle requête XMLHttpRequest

const xhr = new XMLHttpRequest();

xhr.open("GET", "loadFromDB.php", true);

// Fonction appelée lorsque la requête est terminée

xhr.onload = function() {

if (xhr.status === 200) {

const rowData = JSON.parse(xhr.responseText);  // Parse la réponse JSON

// Vérifier si des données ont été récupérées

if (Array.isArray(rowData)) {

const rows = table.querySelectorAll('tbody tr');

// Remplir le tableau avec les données récupérées

rowData.forEach((dataRow, rowIndex) => {

const row = rows[rowIndex] || table.insertRow();

// Remplir chaque cellule du tableau

dataRow.forEach((cellData, cellIndex) => {

let cell = row.cells[cellIndex];

if (!cell) {

cell = row.insertCell(cellIndex); // Insérer la cellule si elle n'existe pas encore

}

cell.textContent = cellData;  // Affecter la donnée à la cellule

cell.classList.remove('active'); // Réinitialiser la classe active

// Ajouter la classe active si la cellule contient '1'

if (cellData === '1') {

cell.classList.add('active');

}

});

} else {

alert("Les données récupérées ne sont pas dans le format attendu.");

}

} else {

alert("Erreur de chargement des données");

}

};

// Envoi de la requête

xhr.send();

});

</script>

</body>

</html>