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

jQuery Discussion :

Appliquer css sur une ligne précise d'un tableau


Sujet :

jQuery

  1. #1
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut Appliquer css sur une ligne précise d'un tableau
    Bonjour à tous,

    Je ne sais pas si je me trouve dans la bonne rubrique mais j'aurais besoin de vos connaissances.

    Je travaille sur un tableau créé en html, php / mysql. Et ce que je souhaiterais faire est un script qui permette d'appliquer une propriété css à une ligne précise car elle contient une donnée dans une cellule.

    Pour illustrer mon propos, un exemple :

    Nom Prénom Age Test
    Snoop Dogg 50 Test
    Tupac Shakur 47 Test
    Notorious BIG 48 Test
    Tupac Shakur 47 Test


    J'aimerais faire un script qui fasse cette action : sur chaque ligne où "Shakur" apparait, appliquer une propriété css par exemple {font-weight:bold;} sur le mot Test de la même ligne.

    Après de nombreuses recherches sur google, déjà je ne trouve pas comment déjà cibler une donnée d'une cellule.
    Cela fait plus d'une semaine que je cherche. Encore une fois je ne sais pas si je suis à la bonne rubrique ou si une autre technologie permet de faire ce que je recherche.

    Merci pour votre aide qui sera précieuse.

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

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    ce qui se fait habituellement est de mettre une classe css sur les balises "tr".
    ainsi vous pouvez cibler la case dont vous parlez avec un sélecteur .shakhur .test par exemple.

  3. #3
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    Merci Mathieu. J'ai oublié de préciser que le tableau comporte des milliers de lignes. Du coup, j'ai du mal à visualiser comment je pourrais faire le script et la condition.
    Vous me conseillez jquery, javascript ou un autre langage pour faire la condition avec le css ?

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    oh désolé, je pensais qu'on était sur le forum css. ma 1re réponse reste quand même valable mais il manque des morceaux pour tout accrocher ensemble.

    quand vous dites que vous voulez faire cela en jquery, c'est parce que vous n'avez pas toutes les informations au chargement la page ? donnez nous plus de détails sur ce que fait cette page.

  5. #5
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    La page présente un tableau alimenté dynamiquement par une base de données sql, et il a été créée à l'aide d'une bibliothèque php qui s'appelle xcrud.
    Le tableau vient afficher les données qui ont été enregistrés dans la base de données.
    Je ne souhaite pas forcément utiliser jquery, n'étant pas très doué, je cherche un moyen de faire une condition facilement en manipulant les données inscrites sur le tableau.
    Je voudrais faire un code qui ressemble grossièrement à ça dans l'idée : if(nom = Tupac && age == 47){this.row[test].css(font-weight:bold}

    Ce code c'est du charabia, il n'est pas bon mais c'est pour vous donner une idée de ce que j'aimerais.

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    vous pouvez essayer cela : $("td.nom:contains('Tupak')").closest("tr").find("td.case_test").
    la 1re partie va chercher le texte dans le contenu. ensuite "closest" cherche la ligne parente et enfin "find" cherche la case dans la ligne.

    vous pouvez regardez là pour plus d'informations sur les sélecteurs :
    https://api.jquery.com/category/sele...lter-selector/

  7. #7
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    Je me rapproche de plus en plus de mon but avec votre aide.
    J'essaie d'appliquer le css lorsqu'il trouve le contenu mais ça ne fonctionne pas.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <script>
    $(document).ready( function () {
    $("td:contains('Tupac')").closest("tr").find('td:contains('Test').css( "font-weight", "bold" );
     
      } );
     
    </script>
    Il y a pas un moyen de faire $("td:contains('Tupac')").closest("tr").('nomdelaclasse').css( "font-weight", "bold" ); ?

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour et bienvenue sur DVP.

    Je traiterais cela en JavasScript et en CSS.
    • Le JavaScript pour la recherche et l'affectation d'une classe sur la <tr> ;
    • Le CSS pour cibler la bonne colonne.


    Côté JavaScript, without jQuery, cela donnerait, c'est une façon de faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // récup. <table> à traiter
    const oTable = document.querySelector("TABLE");
    // récup. des lignes de celle-ci
    const oRows = oTable.rows;
    // le terme à trouver
    const search = "Search Term";
    // la boucle de recherche
    for (let tr of oRows) {
      const text = tr.textContent;      // lecture du contenu brut
      if (text.includes(search)) {      // occurrence trouvé
        tr.classList.add("marque");     // on ajoute la classe à la <tr>
      }
    }
    certes, c'est plus concis avec jQuery mais là au moins tu vois bien la démarche.

    Maintenant le CSS.
    La règle suivante sera prise en compte dès que tu auras affecté la classe à l'élément :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    tr.marque td:nth-child(4) {
      background-color: #FDE;
      font-weight: 700;
    }

  9. #9
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    Bonjour Nosmoking et merci beaucoup pour ta réponse.
    Je teste cela et reviens te dire si c'est la solution que j'ai adoptée. Bon weekend !

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Je rajoutes que si tu veux cibler une cellule en particulier tu peux écrire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const text = tr.cells[0].textContent;      // lecture du contenu de la 1st cellule
    à la place de :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    const text = tr.textContent;      // lecture du contenu brut de la ligne compléte

  11. #11
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    Bonjour,

    Je ne sais pas ce que je fais de mal. J'ai ajouté à la fin du body ce code
    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
    <script type="text/javascript">
    // récup. <table> à traiter
    const oTable = document.querySelector(".xcrud-list");
    // récup. des lignes de celle-ci
    const oRows = oTable.rows;
    // le terme à trouver
    const search = "47";
    // la boucle de recherche
    for (let tr of oRows) {
      const text = tr.textContent;      // lecture du contenu brut
      if (text.includes(search)) {      // occurrence trouvé
        tr.classList.add("rouge");     // on ajoute la classe à la <tr>
      }
     
     
    </script>
    et dans mon css :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .rouge{
      background-color: red !important;
    }

    Rien n'y fait. J'ai aussi mis les balises <script> </script> sans le text/javascript.

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Les raisons peuvent être nombreuse mais si tu as respecté l'existence des éléments alors il se peut que tu sois en face d'un soucis avec l'application du CSS.

    Si tes <td> ont une backckground-color en affecter une aux <tr> ne changera rien. C'est donc une chose à regarder.

  13. #13
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    En faisant un test du script sur un tableau bateau, je n'arrive pas non plus à faire fonctionner le code.
    Voici mon code entier :

    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
    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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!DOCTYPE HTML>
     
    <html>
    <head>
    <meta charset="UTF-8">
     <style type="text/css">
     
     
     table{
      border-collapse:collapse;
     }
     
     td{
     border:1px solid #ccc;
     width:10%;
     height:5rem;
     
     }
     
     .rouge{
     
     
     background:red;
     
     }
     
     </style>
     
     
     
     
    </head>
     
    <body>
    <table id="tableau" class="table">
    <tbody><tr ><td>Nom</td>
    <td>Prénom</td>
    <td>Age</td>
    <td>Test</td>
    </tr>
    <tr><td>Snoop</td>
    <td>Dogg</td>
    <td>50</td>
    <td>Test</td>
    </tr>
    <tr><td>Tupac</td>
    <td>Shakur</td>
    <td>47</td>
    <td>Test</td>
    </tr>
    <tr><td>Notorious</td>
    <td>BIG</td>
    <td>48</td>
    <td>Test</td>
    </tr>
    <tr><td>Tupac</td>
    <td>Shakur</td>
    <td>47</td>
    <td>Test</td>
    </tr>
    </tbody>
    </table>
     
     <script type="text/javascript">
    // récup. <table> à traiter
    const oTable = document.querySelector("#tableau");
    // récup. des lignes de celle-ci
    const oRows = oTable.rows;
    // le terme à trouver
    const search = "47";
    // la boucle de recherche
    for (let tr of oRows) {
      const text = tr.textContent;      // lecture du contenu brut
      if (text.includes(search)) {      // occurrence trouvé
        tr.classList.add("rouge");     // on ajoute la classe à la <tr>
      }
     
     
    </script>
     
     
    </body>
     
    </html>

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Attention !
    Il te manque une accolade fermante ligne 77 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    for (let tr of oRows) {
      const text = tr.textContent;      // lecture du contenu brut
      if (text.includes(search)) {      // occurrence trouvé
        tr.classList.add("rouge");     // on ajoute la classe à la <tr>
      }
    } // <= manque accolade

  15. #15
    Candidat au Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2021
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2021
    Messages : 8
    Points : 2
    Points
    2
    Par défaut
    Merci beaucoup ! Cela fonctionne parfaitement

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

Discussions similaires

  1. [Toutes versions] Positionnement sur une ligne précise dans un formulaire
    Par Didier L dans le forum Contribuez
    Réponses: 3
    Dernier message: 28/10/2015, 14h21
  2. Couper un fichier sur une ligne précise
    Par boobz79 dans le forum Shell et commandes GNU
    Réponses: 2
    Dernier message: 05/09/2013, 12h07
  3. [Dbgrid] Pointer sur une ligne précise
    Par Nzs26 dans le forum Bases de données
    Réponses: 8
    Dernier message: 11/02/2008, 09h41
  4. Une macro à faire sur une ligne précise
    Par JPDU92 dans le forum VBA Word
    Réponses: 5
    Dernier message: 31/01/2008, 13h13
  5. [HTML] Se placer à une ligne précise dans un tableau
    Par seb55555 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/10/2004, 16h06

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