IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Fonction de recherche dans un tableau HTML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2022
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Help Desk
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Octobre 2022
    Messages : 31
    Par défaut Fonction de recherche dans un tableau HTML
    Hello !

    J'aimerais mettre en place une fonction de recherche dans mon tableau HTML mais je n'arrive pas à me débrouiller.

    Voici mon code .js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
          var $rows = $('#table tr');
          $('#search').keyup(function() {
              var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
     
              $rows.show().filter(function() {
                  var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                  return !~text.indexOf(val);
              }).hide();
          });
    Voici mon
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
                    <input type="text" id="search" placeholder="Type to search">
                    <table class="table table-bordered" id="table">
                        <thead>
                            <tr>
                                <th scope="col">Extension(s)</th>
                                <th scope="col">Registre</th>
                                <th scope="col">Lien vers le registre</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for name, detail in registrars.items %}
                            <tr>
                                <td> {{detail.domains}} </td>
                                <td>{{name}}</td>
                                <td> <a href="{{detail.link}}"> {{detail.link}} </a></td>
                            </tr>
                           {% endfor %}
                        </tbody>
                    </table>

    J'aimerais que quand je commence à taper un mot de ma recherche, cela filtre mon tableau et ne retourne que les résultats correspondants.

    Le truc c'est que dans mon tableau je fais appelle à des variables python (je suis sous Django) et je pense que c'est ça qui bloque.

    Une idée de comment faire ?

    Merci !

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 665
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 665
    Par défaut
    quelque soit le langage utilisé pour généré le code html, la page est utilisée par le navigateur donc c'est seulement la partie client qui est à prendre en compte.
    montrez nous un exemple de code html généré pour qu'on puisse tester.

  3. #3
    Membre averti
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2022
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Help Desk
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Octobre 2022
    Messages : 31
    Par défaut
    Au final j'ai réussi à me débrouiller !

    Pour information voici le code que j'ai utilisé.

    Mon script :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
        <script type="">
    function searchTable() {
        var input, filter, found, table, tr, td, i, j;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                tr[i].style.display = "none";
            }
        }
    }
        </script>
    Mon tableau HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
                    <input id='myInput' onkeyup='searchTable()' type='text' placeholder="Rechercher un domaine/registre" style="margin-bottom: 30px">
                    <table class="table table-bordered" id="myTable">
                        <thead>
                            <tr>
                                <th scope="col">Extension(s)</th>
                                <th scope="col">Registre</th>
                                <th scope="col">Lien vers le registre</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for name, detail in registrars.items %}
                            <tr>
                                <td> {{detail.domains}} </td>
                                <td>{{name}}</td>
                                <td> <a href="{{detail.link}}"> {{detail.link}} </a></td>
                            </tr>
                           {% endfor %}
                        </tbody>
                    </table>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Fonction de recherche dans tableau avec key
    Par blueace dans le forum Langage
    Réponses: 6
    Dernier message: 24/01/2014, 17h42
  2. [XL-2010] Recherche dans un tableau en fonction de saisie
    Par akuma8 dans le forum Macros et VBA Excel
    Réponses: 7
    Dernier message: 22/04/2013, 23h27
  3. recherche dans un tableau HTML
    Par psmpa dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 29/04/2009, 14h34
  4. rechercher dans un tableau en fonction de la valeur d'une cellule
    Par jefe.k dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 08/06/2007, 10h04
  5. Ecrire dans un tableau html depuis une fonction js ?
    Par botanica dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/10/2005, 12h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo