Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>

<head>

<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>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

<button id="saveButton" class="btn btn-primary">Sauvegarder</button>

<button id="loadButton" class="btn btn-secondary">Charger</button>

<button id="resetButton" class="btn btn-danger">Réinitialiser</button>

<h5 class="modal-title" id="resetModalLabel">Confirmation</h5>

<span aria-hidden="true">&times;</span>

</button>

</div>

Voulez-vous vraiment réinitialiser toutes les cellules ?

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>

</div>

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

// Si c'est la première colonne, on permet l'édition du texte

if (cell.cellIndex === 0) {

// Vérification des caractères spéciaux (uniquement alphanumériques autorisés)

const currentValue = cell.textContent;

const input = prompt("Entrez un texte alphanumérique pour cette cellule :", currentValue);

// Si l'utilisateur entre du texte, vérifier qu'il est alphanumérique

if (input && /^[a-zA-Z0-9]*$/.test(input)) {

cell.textContent = input;  // Mettre à jour la cellule avec le texte

} else if (input) {

alert("Les caractères spéciaux ne sont pas autorisés.");

}

} else {

// Si ce n'est pas la première colonne, basculer entre 0 et 1

if (cell.textContent === '0') {

cell.textContent = '1';

cell.classList.add('active');

} else if (cell.textContent === '1') {

cell.textContent = '0';

cell.classList.remove('active');

}

});

// Sauvegarde des données via XMLHttpRequest

document.getElementById('saveButton').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);

});

const xhr = new XMLHttpRequest();

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

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

xhr.onload = function() {

if (xhr.status === 200) {

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

} else {

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

}

};

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

});

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

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

const xhr = new XMLHttpRequest();

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

xhr.onload = function() {

if (xhr.status === 200) {

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

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

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

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

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

let cell = row.cells[cellIndex];

if (!cell) {

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

}

cell.textContent = cellData;

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

if (cellData === '1') {

cell.classList.add('active');

}

});

} else {

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

}

};

xhr.send();

});

// Bouton Réinitialiser pour ouvrir la boîte de dialogue de confirmation

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

$('#resetModal').modal('show');  // Ouvrir la modal Bootstrap

});

// Bouton OK pour réinitialiser les cellules

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

// Réinitialiser toutes les cellules à '0'

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

rows.forEach(row => {

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

cells.forEach(cell => {

cell.textContent = '0';

cell.classList.remove('active');  // Supprimer la classe active

});

$('#resetModal').modal('hide');  // Fermer la modal

});

</script>

</body>

</html>