playchatgpt/competenze/index_old.html

<!DOCTYPE html>
<html>
<head>
    <title>Competenze di Data Literacy</title>
    <style>
        table {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        input[type="text"] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>Competenze di Data Literacy</h1>
    
    <input type="text" id="searchInput" placeholder="Cerca competenza..." onkeyup="searchTable()">
    
    <table id="competenzeTable">
        <thead>
            <tr>
                <th>Numero progressivo competenza</th>
                <th>Nome competenza</th>
                <th>Livello</th>
                <th>Descrizione</th>
                <th>Cose fare per acquisirla</th>
            </tr>
        </thead>
        <tbody>
            <!-- I dati verranno caricati qui usando jQuery -->
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Carica i dati dal file CSV
            $.get("competenze.csv", function (data) {
                // Dividi il file CSV in righe
                var lines = data.split("\n");

                // Itera sulle righe del CSV (ignorando l'intestazione)
                for (var i = 1; i < lines.length; i++) {
                    var line = lines[i].split(";");
                    var row = "<tr>";
                    for (var j = 0; j < line.length; j++) {
                        row += "<td>" + line[j] + "</td>";
                    }
                    row += "</tr>";
                    $("#competenzeTable tbody").append(row);
                }
            });
        });

        // Funzione per filtrare la tabella in base all'input dell'utente
        function searchTable() {
            var input, filter, table, tr, td, i, j, txtValue;
            input = document.getElementById("searchInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("competenzeTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                var displayRow = false;
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    txtValue = td[j].textContent || td[j].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        displayRow = true;
                        break;
                    }
                }
                if (displayRow) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>
</body>
</html>