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">Sauvegarder</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');

}

});

// Fonction pour télécharger un fichier

function downloadFile(content, fileName, contentType) {

const a = document.createElement('a');

const file = new Blob([content], { type: contentType });

a.href = URL.createObjectURL(file);

a.download = fileName;

a.click();

}

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

);

const jsonState = JSON.stringify(state, null, 2);

downloadFile(jsonState, 'table_state.json', 'application/json');

alert('L\'état du tableau a été sauvegardé dans un fichier JSON.');

});

</script>

</body>

</html>