Changer la couleur du background d'un <tr>

poupilou · 11 Février 2020

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.

Furtif · 11 Février 2020

CSS

https://www.somacon.com/p338.php
https://developer.mozilla.org/fr/docs/Web/HTML/Element/tr

colonies · 11 Février 2020

Furtif a dit:
CSS (...)

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>

Furtif · 11 Février 2020

colonies a dit:
changer le style CSS en javascript

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

colonies · 11 Février 2020

Furtif a dit:
Pourquoi ajouter du javascript ?

Bah... franchement, je ne vois pas comment faire sans vu ce qu'il demande.

rick38 · 12 Février 2020

Pas possible sans javascript.

ABCWEB · 12 Février 2020

javascript ou jquery ya plein de tuto

Après mettre une div sous un tr pas sur que ce soit supporté niveau html.

poupilou · 12 Février 2020

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 ?

poupilou · 12 Février 2020

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 ?

poupilou · 12 Février 2020

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 ?

Furtif · 12 Février 2020

https://www.w3schools.com/css/default.asp
https://openweb.eu.org/articles/tableaux_css
https://www.numelion.com/tableau-html.html

rick38 · 12 Février 2020

3 liens hors-sujet puisqu'il faut du javascript.

noren · 12 Février 2020

J'ai effacé ce que j'ai dit, j'ai testé et ça marche pas

ABCWEB · 13 Février 2020

Code:

if($(this).css("background-color") == "#fff")

tu testes ta couleur si c'est pas celle que tu veux tu la changes

poupilou · 13 Février 2020

ABCWEB a dit:
Code:

if($(this).css("background-color") == "#fff")

tu testes ta couleur si c'est pas celle que tu veux tu la changes

Désolé mais ça ne marche pas.

spout · 13 Février 2020

https://jsfiddle.net/rz0kLfnh/

poupilou · 13 Février 2020

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.

rick38 · 13 Février 2020

Alors ajoute un if :

https://jsfiddle.net/9hevqkgr/

poupilou · 13 Février 2020

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

colonies · 13 Février 2020

Ç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 · 13 Février 2020

Merci colonies, ton code marche parfaitement bien et c'est vrai que c'est plus propre comme code.

spout · 14 Février 2020

Vu que t'as jQuery, quasi 20 lignes de code AJAX peuvent être remplacées par $.get()