Changer la couleur du background d'un <tr>

WRInaute passionné
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.
 
WRInaute impliqué
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>
 
WRInaute passionné
javascript ou jquery ya plein de tuto

Après mettre une div sous un tr pas sur que ce soit supporté niveau html.
 
WRInaute passionné
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 ?
 
WRInaute passionné
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 ?
 
WRInaute passionné
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 ?
 
WRInaute passionné
Code:
if($(this).css("background-color") == "#fff")

tu testes ta couleur si c'est pas celle que tu veux tu la changes
 
WRInaute passionné
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.
 
WRInaute passionné
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 ;)
 
WRInaute impliqué
Ç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.
 
Discussions similaires
Haut