Changer la couleur du background d'un <tr>

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 11 Février 2020.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Salut à tous,

    J'ai un tableau html et lorsqu'on clique sur une ligne <tr> ça ouvre une div sous cette ligne <tr>.

    Je voudrais changer la couleur du background de la ligne <tr> sur laquelle on vient de cliquer, comment faire cela ?

    Merci pour votre réponses.
     
  2. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    560
    J'aime reçus:
    68
    Tu ne le guide vers rien de précis et ton premier lien a l'air de dater (CSS 2.1, pas question d'alternance via CSS : la grande époque ;-) ).

    Pour poupilou : si tu veux changer la couleur de manière permanente (et pas juste pendant que le bouton de la souris est enfoncé), tu dois changer le style CSS en javascript.
    Exemple :
    Code:
    <!doctype html><html><body>
    <script>
        function change(objetTr) {
            objetTr.style.backgroundColor = 'red';
        }
    </script>
    <table>
        <tr onclick="change(this)">
            <td>Voilà un exemple</td>
            <td>Seconde cellule</td>
        </tr>
    </table>
    
    Cela dit, il est généralement bien mieux de créer une classe CSS et de l'ajouter, éventuellement la supprimer.
    Code:
    <!doctype html><html><body>
    <style>
        .active {
            background-color: red;
        }
    </style>
    <script>
        function changeClass(objetTr) {
            objetTr.className = 'active';
            // pour supprimer : objetTr.className = '';
          
            // alternative plus récente (compatibilité visible sur https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility)
            // objetTr.classList.add('active');
            // objetTr.classList.remove'active');
        }
    </script>
    <table>
        <tr onclick="changeClass(this)">
            <td>Voilà un exemple</td>
            <td>Seconde cellule</td>
        </tr>
    </table>
    
     
  3. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 781
    J'aime reçus:
    222
    Pourquoi ajouter du javascript ?
    J'ai pas de code sous la main, mais autant le faire sans, et une recherche google donne un tas de reponses, pas la peine d'alourdir le code

    ;)
     
  4. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    560
    J'aime reçus:
    68
    Bah... franchement, je ne vois pas comment faire sans vu ce qu'il demande. o_O
     
  5. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 531
    J'aime reçus:
    205
    Pas possible sans javascript.
     
  6. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    938
    J'aime reçus:
    101
    javascript ou jquery ya plein de tuto

    Après mettre une div sous un tr pas sur que ce soit supporté niveau html.
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci pour vos réponses.

    J'ai pour l'instant un tableau html avec 12 colonnes qui liste mes produits et pour chaque produit on va avoir +/- 20 détails à afficher, c'est la raison pour laquelle j'ai opté pour une div qui s'ouvre sous la <tr> afin d'afficher les détails de chaque produit.

    On pourrait aussi afficher le détail de chaque produit en cliquant sur la <tr> qui ouvrirait une fenêtre pop-up dans laquelle on afficherai le détail du produit mais bon je trouve que c'est un peu moins pratique que l'ouverture de la div sous la <tr> car avec cette solution on ne quitte pas des yeux le tableau des produits.

    Si vous voyez une autre méthode que le tableau html pour afficher (lister) mes produits, pourquoi pas.

    On peut facilement en css changer la couleur d'une <tr> au survol de la souris sur la <tr> avec la pseudo-class hover mais je n'est rien trouvé comme pseudo-class css pour changer la couleur du background de la <tr> lorsqu'on clique sur cette <tr>, voyez-vous une solution en css ?
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    J'utilise pour l'ouverture de ma div sous la <tr> cette fonction :
    Code:
    $(function(){
    var check_state = false;
    $("tr[id^=DetailsProduit_]").click(function(event) {
        var str = $(this).attr('id').substr(15);
        if (check_state === false) {
          $("#details-table_" + str).stop().slideDown("fast");
          check_state = true;
          var xmlhttp;
          if(window.XMLHttpRequest)
          {
              xmlhttp = new XMLHttpRequest();
          }
          else
          {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if(this.readyState==4 && this.status==200)
              {
              document.getElementById("details-table_"+str).innerHTML=xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","../details_produit.php?num="+str,true);
          xmlhttp.send();
        }
        else
        {
          $("#details-table_" + str).stop().slideUp(1000);
          check_state = false;
        }
        event.preventDefault();
        });
    });
    Que faut-il ajouter à cette fonction pour changer la couleur du background de la <tr> sur laquelle on vient de cliquer ?
     
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    J'ai rajouté ces 2 lignes à mon code ci-dessus :
    Code:
    $('tr td').css({ 'background-color' : '#ffffff'});
    $('td', this).css({ 'background-color' : '#777777' });  
    
    Ce code https://jsbin.com/vekekapocu/edit?html,js,output change la couleur du background de la <tr> lorsqu'on clique sur la <tr> mais lorsqu'on clique une deuxième fois sur cette <tr> la couleur du background reste la même.

    Dans mon cas de figure, l'internaute clique une fois sur la <tr> pour ouvrir la div et une deuxième fois pour refermer cette div et il faut que la couleur du background de la <tr> change à chaque fois.

    Voyez-vous une solution ?
     
  10. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 781
    J'aime reçus:
    222
  11. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 531
    J'aime reçus:
    205
    3 liens hors-sujet puisqu'il faut du javascript.
     
  12. noren
    noren WRInaute accro
    Inscrit:
    8 Avril 2011
    Messages:
    2 906
    J'aime reçus:
    14
    J'ai effacé ce que j'ai dit, j'ai testé et ça marche pas :)
     
    #13 noren, 12 Février 2020
    Dernière édition: 12 Février 2020
  13. ABCWEB
    ABCWEB WRInaute impliqué
    Inscrit:
    22 Octobre 2015
    Messages:
    938
    J'aime reçus:
    101
    Code:
    if($(this).css("background-color") == "#fff")
    tu testes ta couleur si c'est pas celle que tu veux tu la changes
     
  14. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Désolé mais ça ne marche pas.
     
  15. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 077
    J'aime reçus:
    295
  16. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci spout mais lorsque tu cliques sur une <tr> ça doit changer la couleur du background et lorsque tu cliques une deuxième fois sur cette <tr> ça doit aussi rechanger la couleur du background et revenir à la couleur initiale du background.
     
  17. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 531
    J'aime reçus:
    205
    #18 rick38, 13 Février 2020
    Dernière édition: 13 Février 2020
    poupilou apprécie ceci.
  18. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci rick38 ton code fonctionne :)

    Par contre dans mon cas, un clique ça ouvre en ajax ma div sous la <tr> et un autre clique sur cette même <tr> ça la ferme.

    Va savoir pourquoi, parfois lorsque je clique sur la <tr> ça n'ouvre pas ma div, je dois re-cliquer une deuxième fois pour que ça l'ouvre, sauf que dans ce cas là (2 cliques de suite) et je me retrouve avec ma div d'ouverte mais la couleur du background de la <tr> n'est plus la bonne.

    Donc pour que ça fonctionne parfaitement bien, il faut checker l'ouverture de ma div :

    - si div ouverte => couleur du background légèrement fonçé
    - si div fermé => couleur du background blanc (on enlève la class 'active')

    Ca donne ça comme code :
    Code:
    $(function(){
    var check_state = false;
    $("tr[id^=DetailsProduit_]").click(function(event) {
       let $tr = $('#test tr');
        if (check_state === true){
          $(this).removeClass('active');
       }
        else {
           $tr.removeClass('active');     
           $(this).addClass('active');
        }
        var str = $(this).attr('id').substr(15);
        if (check_state === false) {
          $("#details-table_" + str).stop().slideDown("fast");
          check_state = true;
          var xmlhttp;
          if(window.XMLHttpRequest)
          {
              xmlhttp = new XMLHttpRequest();
          }
          else
          {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if(this.readyState==4 && this.status==200)
              {
              document.getElementById("details-table_"+str).innerHTML=xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","../details_produit.php?num="+str,true);
          xmlhttp.send();
        }
        else
        {
          $("#details-table_" + str).stop().slideUp(1000);
          check_state = false;
        }
        event.preventDefault();
        });
    });
    Merci à tous pour votre aide ;)
     
  19. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    560
    J'aime reçus:
    68
    Ça devrait plutôt être un truc du genre :
    Code:
    $(function(){
    var check_state = false;
    $("tr[id^=DetailsProduit_]").click(function(event) {
       
        var str = $(this).attr('id').substr(15);
        if (check_state === false) {
          $(this).addClass('active');
          $("#details-table_" + str).stop().slideDown("fast");
          check_state = true;
          var xmlhttp;
          if(window.XMLHttpRequest)
          {
              xmlhttp = new XMLHttpRequest();
          }
          else
          {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
              if(this.readyState==4 && this.status==200)
              {
              document.getElementById("details-table_"+str).innerHTML=xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","../details_produit.php?num="+str,true);
          xmlhttp.send();
        }
        else
        {
          $(this).removeClass('active');
          $("#details-table_" + str).stop().slideUp(1000);
          check_state = false;
        }
        event.preventDefault();
        });
    });
    
    Principe : tu as déjà le test nécessaire qui fait que ton div s'anime en ouverture/fermeture.
    À l'endroit où tu l'ouvres, tu couples ça avec l'ajout de classe active.
    À l'endroit où tu le fermes, tu couples ça avec la suppression de classe active.
     
    poupilou apprécie ceci.
  20. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    823
    J'aime reçus:
    10
    Merci colonies, ton code marche parfaitement bien et c'est vrai que c'est plus propre comme code.
     
  21. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 077
    J'aime reçus:
    295
    Vu que t'as jQuery, quasi 20 lignes de code AJAX peuvent être remplacées par $.get()
     
Chargement...
Similar Threads - Changer couleur background Forum Date
Changer couleur lien avec javascript Développement d'un site Web ou d'une appli mobile 5 Décembre 2016
Changer l'aspect de la palette des couleurs sur Prestashop e-commerce 10 Janvier 2013
Changer la couleur d'un pixel sur une image en php Développement d'un site Web ou d'une appli mobile 2 Mai 2011
jQuery : changer la couleur d'un input Développement d'un site Web ou d'une appli mobile 19 Janvier 2010
Changer le mdp sans connaitre l'ancien chez Digital Ocean Administration d'un site Web 6 Janvier 2020
Le monde vient de changer (Bert inside) Référencement Google 10 Décembre 2019
Article fixe avec bannière changer souvent Crawl et indexation Google, sitemaps 9 Octobre 2019
Changer de mot clé ? Référencement Google 5 Août 2019
Changer la police de la SERP Référencement Google 16 Juillet 2019
Changer mon url canonique oui / non ? Débuter en référencement 26 Mai 2019