Comment filtrer des colonnes d'un tableau en html ?

Filtrer des colonnes d'un tableau en HTML implique généralement l'utilisation de JavaScript pour manipuler les données du tableau en fonction des conditions de filtrage définies. Voici un exemple basique sur la façon dont il est possible de configurer un tableau HTML et appliquer un filtrage sur les colonnes à l'aide de JavaScript.

Exemple de Code HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filtrer un Tableau</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Tableau avec Filtrage des Colonnes</h2>

<input type="text" id="filterInput" placeholder="Filtrer par prénom..." onkeyup="filterTable()">

<table id="myTable">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Jean</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Durand</td>
            <td>Marie</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Pierre</td>
            <td>45</td>
        </tr>
    </tbody>
</table>

<script>
function filterTable() {
    const input = document.getElementById('filterInput');
    const filter = input.value.toUpperCase();
    const table = document.getElementById('myTable');
    const tr = table.getElementsByTagName('tr');

    for (let i = 1; i < tr.length; i++) {
        const td = tr[i].getElementsByTagName('td')[1]; // Colonne Prénom
        if (td) {
            const txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = '';
            } else {
                tr[i].style.display = 'none';
            }
        }
    }
}
</script>

</body>
</html>

Voici le résultat en ligne :

Explications:

HTML et CSS : Le code définit un simple tableau avec trois colonnes (Nom, Prénom, Âge) et quelques lignes de données.
Input de Filtrage : Une barre de texte où l'utilisateur peut taper pour filtrer le tableau selon le prénom des personnes.
JavaScript : La fonction filterTable() est déclenchée chaque fois que l'utilisateur tape dans le champ d'entrée. Elle récupère la valeur entrée, la convertit en majuscules pour une comparaison insensible à la casse, et cache les lignes qui ne correspondent pas au filtre.
Filtrage : Pour chaque ligne dans le tableau (tr), on vérifie si la valeur de la cellule dans la colonne prénom (deuxième colonne, donc index [1]) contient le texte filtré. Si ce n'est pas le cas, la ligne est masquée.

Ce modèle de filtrage peut être adapté pour filtrer d'autres colonnes ou pour ajouter des fonctionnalités de filtrage plus complexes.