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>

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

}

});

// Fonction pour sauvegarder les données du tableau dans un fichier JSON

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 blob = new Blob([JSON.stringify(data)], { type: 'application/json' });

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

link.href = URL.createObjectURL(blob);

link.download = 'tableau_sauvegarde.json';

link.click();

});

// Fonction pour charger les données depuis un fichier JSON

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

document.getElementById('fileInput').click();

});

document.getElementById('fileInput').addEventListener('change', (event) => {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(e) {

const data = JSON.parse(e.target.result);

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

// Remplir le tableau avec les données du fichier

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

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

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

}

});

};

reader.readAsText(file);

}

});

</script>

</body>

</html>