Changer la couleur du background d'un <tr>

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.

 

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 ?

 

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 ?

 

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 ?

 

Désolé mais ça ne marche pas.

 

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.

 

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

 

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