Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau avec Sauvegarde</title>
    <script>
        function saveData() {
            let table = document.getElementById("dataTable");
            let data = [];
            for (let i = 0; i < table.rows.length; i++) {
                let row = [];
                for (let j = 0; j < table.rows[i].cells.length; j++) {
                    row.push(table.rows[i].cells[j].innerText);
                }
                data.push(row);
            }
            
            fetch('save.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            }).then(response => response.text()).then(data => {
                alert("Données sauvegardées !");
            });
        }
        
        function loadData() {
            fetch('load.php')
            .then(response => response.json())
            .then(data => {
                let table = document.getElementById("dataTable");
                for (let i = 0; i < data.length; i++) {
                    for (let j = 0; j < data[i].length; j++) {
                        table.rows[i].cells[j].innerText = data[i][j];
                    }
                }
            });
        }
        
        function clearTable() {
            let table = document.getElementById("dataTable");
            for (let i = 0; i < table.rows.length; i++) {
                for (let j = 0; j < table.rows[i].cells.length; j++) {
                    table.rows[i].cells[j].innerText = "";
                }
            }
        }
    </script>
</head>
<body>
    <table id="dataTable" border="1">
        <tr><td contenteditable="true">A1</td><td contenteditable="true">B1</td></tr>
        <tr><td contenteditable="true">A2</td><td contenteditable="true">B2</td></tr>
    </table>
    <br>
    <button onclick="saveData()">Sauve</button>
    <button onclick="loadData()">Lire</button>
    <button onclick="clearTable()">Efface</button>
</body>
</html>