appnotes/testnote.html at master · Blue-B-code/appnotes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau Modifiable</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id="editableTable">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Âge</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td contenteditable="true">Dupont</td>
                <td contenteditable="true">Jean</td>
                <td contenteditable="true">22</td>
            </tr>
            <tr>
                <td contenteditable="true">Martin</td>
                <td contenteditable="true">Marie</td>
                <td contenteditable="true">28</td>
            </tr>
        </tbody>
    </table>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const table = document.getElementById('editableTable');
            const rows = table.rows;

            // Charger les données enregistrées
            if(localStorage.getItem('tableData')) {
                const savedData = JSON.parse(localStorage.getItem('tableData'));
                for(let i = 1; i < rows.length; i++) {
                    const cells = rows[i].cells;
                    cells[0].innerText = savedData[i-1][0];
                    cells[1].innerText = savedData[i-1][1];
                    cells[2].innerText = savedData[i-1][2];
                }
            }

            // Enregistrer les modifications
            table.addEventListener('input', () => {
                const data = [];
                for(let i = 1; i < rows.length; i++) {
                    const cells = rows[i].cells;
                    data.push([cells[0].innerText, cells[1].innerText, cells[2].innerText]);
                }
                localStorage.setItem('tableData', JSON.stringify(data));
            });
        });
    </script>
</body>
</html>