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 Dynamique</title>

th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
            white-space: nowrap; /* Évite le retour à la ligne */
            box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur totale */
        }

thead th {
            background: #f8f8f8;
            position: sticky;
            top: 0;
            z-index: 2; /* S'assure que l'en-tête reste au-dessus du contenu */
        }

.table-container {
            width: 100%;
            overflow-x: auto;
            position: relative;
            margin-top: 20px;
            border: 1px solid #ddd; /* Pour délimiter la zone de défilement */
        }

/* Fixe les deux premières colonnes */
        th:first-child, td:first-child {
            position: sticky;
            left: 0;
            z-index: 4; /* Pour qu'elles soient au-dessus des autres colonnes */
            background: white;
            border-right: 2px solid black; /* Séparation visible */
            width: 80px; /* Largeur fixe pour la première colonne */
            min-width: 80px; /* Largeur minimale pour la première colonne */
            max-width: 80px; /* Largeur maximale pour la première colonne */
        }

th:nth-child(2), td:nth-child(2) {
            position: sticky;
            left: 80px; /* Décalage pour ne pas chevaucher la première colonne */
            z-index: 3; /* Pour qu'elles soient au-dessus des autres colonnes */
            background: white;
            border-right: 2px solid black; /* Séparation visible */
            width: 100px; /* Largeur fixe pour la deuxième colonne */
            min-width: 100px; /* Largeur minimale pour la deuxième colonne */
            max-width: 100px; /* Largeur maximale pour la deuxième colonne */
        }

/* Centrer la combo box dans la cellule */
        td:first-child {
            display: flex;
            justify-content: center;
            align-items: center;
        }

select {
            width: 100%; /* Assure que la combo box prend toute la largeur de la cellule */
            max-width: 80px; /* Limite la largeur maximale de la combo box */
        }

button {
            margin-top: 20px;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<div class="table-container">
    <table>
        <thead>
            <tr id="header-row">
                <th>Nom</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</div>

<button id="getDataButton">Récupérer les données du tableau</button>
<button id="sendDataButton">Envoyer les données</button>
<button id="readDataButton">Lire les données</button>
<button id="addRowButton">Ajouter une ligne</button>

function createTable() {
        const theadRow = document.getElementById("header-row");

// Ajouter dynamiquement les colonnes après "Total"
        for (let i = 0; i < numCols; i++) {
            let th = document.createElement("th");
            th.textContent = `Col${i + 1}`;
            theadRow.appendChild(th);
        }
    }

function addRow() {
        const tbody = document.getElementById("table-body");
        let row = document.createElement("tr");

// Colonne avec select
        let selectCell = document.createElement("td");
        let select = document.createElement("select");
        for (let j = 1; j <= 5; j++) {
            let option = document.createElement("option");
            option.textContent = j;
            select.appendChild(option);
        }
        selectCell.appendChild(select);
        row.appendChild(selectCell);

// Colonne total (initialisé à 0)
        let totalCell = document.createElement("td");
        totalCell.textContent = "0";
        row.appendChild(totalCell);

// Colonnes dynamiques avec valeurs aléatoires
        for (let j = 0; j < numCols; j++) {
            let cell = document.createElement("td");
            cell.textContent = Math.random() < 0.5 ? "1" : "0";
            row.appendChild(cell);
        }

tbody.appendChild(row);
    }

window.onload = function() {
        createTable();
    };

function getTableData() {
        let rows = document.querySelectorAll('tbody tr');
        let tableData = [];

rows.forEach(function(row) {
            let rowData = [];
            let cells = row.querySelectorAll('td');

// Récupère toutes les cellules, y compris la première cellule qui contient la combo box
            cells.forEach(function(cell) {
                // Si la cellule contient une combo box, on récupère la valeur sélectionnée
                if (cell.querySelector('select')) {
                    rowData.push(cell.querySelector('select').value); // Récupère la valeur de la combo box
                } else {
                    rowData.push(cell.innerText); // Récupère le texte de la cellule
                }
            });
            tableData.push(rowData); // Ajoute les données de la ligne au tableau
        });

return tableData; // Retourne toutes les données du tableau (y compris la combo box)
    }

function logTableData() {
        let data = getTableData();
        console.log(data); // Affiche les données dans la console

// Convertir en JSON et afficher dans la console
        console.log(JSON.stringify(data, null, 2)); // JSON avec une indentation de 2 espaces
    }

// Ajouter un événement au bouton pour déclencher la récupération des données
    document.getElementById('getDataButton').addEventListener('click', logTableData);

function sendTableData() {
        let data = getTableData(); // Récupération des données du tableau
        let jsonData = JSON.stringify(data);

fetch('insert.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: jsonData
        })
        .then(response => response.json()) // Convertir la réponse en JSON
        .then(data => {
            alert(data.message); // Afficher le message du serveur
        })
        .catch(error => {
            console.error('Erreur:', error);
        });
    }

document.getElementById('sendDataButton').addEventListener('click', sendTableData);

// Fonction pour lire les données du dernier enregistrement
    function readTableData() {
        fetch('lecture.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json()) // Convertir la réponse en JSON
        .then(data => {
            if (data.success) {
                updateTable(data.data_json); // Met à jour le tableau avec les données récupérées
            } else {
                alert('Erreur lors de la récupération des données.');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
        });
    }

// Associer la fonction au bouton "Lire les données"
    document.getElementById('readDataButton').addEventListener('click', readTableData);

function updateTable(data) {
        let tableData = JSON.parse(data); // Convertir le JSON en tableau JS
        const tbody = document.getElementById("table-body");

// Supprimer toutes les lignes existantes dans le tableau
        while (tbody.firstChild) {
            tbody.removeChild(tbody.firstChild);
        }

// Recréer les lignes en fonction des données JSON
        tableData.forEach(rowData => {
            let row = document.createElement("tr");

// Colonne avec select
            let selectCell = document.createElement("td");
            let select = document.createElement("select");
            for (let j = 1; j <= 5; j++) {
                let option = document.createElement("option");
                option.textContent = j;
                select.appendChild(option);
            }
            select.value = rowData[0]; // Définir la valeur sélectionnée
            selectCell.appendChild(select);
            row.appendChild(selectCell);

// Colonne total
            let totalCell = document.createElement("td");
            totalCell.textContent = rowData[1];
            row.appendChild(totalCell);

// Colonnes dynamiques
            for (let j = 2; j < rowData.length; j++) {
                let cell = document.createElement("td");
                cell.textContent = rowData[j];
                row.appendChild(cell);
            }

tbody.appendChild(row);
        });
    }

// Ajouter un événement au bouton pour ajouter une nouvelle ligne
    document.getElementById('addRowButton').addEventListener('click', addRow);
</script>

</body>
</html>