onmouseover sur un tr

onmouseover sur un tr - HTML/CSS - Programmation

Marsh Posté le 17-12-2009 à 11:40:08    

Bonjour,

 

J'ai un problème tout bête mais qui me fais perdre patience :

 

J'ai un tableau HTML du type :

 
Code :
  1. <table>
  2.      <tr class="police_table" onmouseout="javascript:this.style.backgroundColor='#EEEEF7';" onmouseover="javascript:this.style.backgroundColor='#C0C0C0';">
  3.           <td rowspan="3">Produit</td>
  4.           <td>Numéro Produit 1</td>
  5.           <td>Nom Produit 1</td>
  6.      </tr>
  7.      <tr>
  8.           <td>Numéro Produit 2</td>
  9.           <td>Nom Produit 2</td>
  10.      </tr>
  11.      <tr>
  12.           <td>Numéro Produit 3</td>
  13.           <td>NomProduit 3</td>
  14.      </tr>
  15. </table>
 

Le truc c'est qu'à cause du rowspan, je ne peut pas surligner toute la ligne entière au passage de la souris... Quelqu'un peut m'aider ?


Message édité par Magg27 le 17-12-2009 à 11:40:47
Reply

Marsh Posté le 17-12-2009 à 11:40:08   

Reply

Marsh Posté le 17-12-2009 à 11:50:17    

chez moi ca marche :spamafote:
 
quand je survole "produit" ou "Numéro Produit 1" ou "Nom Produit 1" j'ai bien ces trois éléments qui changent de couleur. ou alors ce n'est pas ca que tu veux?

Reply

Marsh Posté le 17-12-2009 à 11:53:19    

Merci pour ta réponse. Effectivement, ce n'est pas ça que je veux : j'aimerais que tout change de couleur au passage de la souris.

Reply

Marsh Posté le 17-12-2009 à 11:57:11    

Je ne comprend pas bien ton soucis : en fait, que veux tu surligner exactement au passage de la souris ?
De mon côté, j'ai la première ligne qui est surlignée, et le rowspan fait comme si la première colonne l'était aussi.
 
Tu veux surligner tout le tableau ? Juste certaines lignes ?


Message édité par lautrejojo le 17-12-2009 à 11:58:19

---------------
Question sur la programmation ? DevWeb it!
Reply

Marsh Posté le 17-12-2009 à 12:01:31    

Désolé pour mon manque de clarté. En fait j'aimerais qu'au passage de la souris tous les éléments du tableau changent de couleur. C'est-à-dire "Produit", "Numéro Produit 1", "Nom Produit 1", "Numéro Produit 2", "Nom Produit 2", "Numéro Produit 3", "Nom Produit 3". En bref tout.

Reply

Marsh Posté le 17-12-2009 à 12:04:21    

dans ce cas,  
 

Code :
  1. <table class="police_table" onmouseout="javascript:this.style.backgroundColor='#EEEEF7';" onmouseover="javascript:this.style.backgroundColor='#C0C0C0';">
  2.      <tr>
  3.           <td rowspan="3">Produit</td>
  4.           <td>Numéro Produit 1</td>
  5.           <td>Nom Produit 1</td>
  6.      </tr>
  7.      <tr>
  8.           <td>Numéro Produit 2</td>
  9.           <td>Nom Produit 2</td>
  10.      </tr>
  11.      <tr>
  12.           <td>Numéro Produit 3</td>
  13.           <td>NomProduit 3</td>
  14.      </tr>
  15. </table>


 
Il me semble que ceci répond à ton besoin : j'ai déplacé le javascript à l'ensemble du tableau.


---------------
Question sur la programmation ? DevWeb it!
Reply

Marsh Posté le 17-12-2009 à 14:27:59    

Merci, mais j'ai pris un mauvais exemple. C'est plus compliqué que ça en fait. Il vaut mieux que je présente le véritable contexte :
 
A l'aide d'une BDD MySQL, il faut que j'affiche diverses informations concernant les clients d'une entreprise sous forme de tableau :
 
| Nom Client | Pays Client | Produits vendus au client                 | Spécifications produit
| Client x     | France       | Cette cellule peut contenir n produits  | Cette cellule peut contenir n spécifications
 
Du coup voici comment je m'y suis pris :

Code :
  1. <table border="1">
  2.      <tr>
  3.           <td>Nom Client</td>
  4.           <td>Pays Client</td>
  5.           <td>Produits vendus au client</td>
  6.           <td>Spécifications produit</td>
  7.      </tr>
  8.      <tr>
  9.           <td rowspan="n">Client x</td>
  10.           <td rowspan="n">Pays Client</td>
  11.           <td>Produit x</td>
  12.           <td>Spécification x</td>
  13.      </tr>
  14.      <tr>
  15.           <td>Produit x+1</td>
  16.           <td>Spécification x+1</td>
  17.      </tr>
  18.      <tr>
  19.           <td>Produit x+2</td>
  20.           <td>Spécification x+2</td>
  21.      </tr>
  22.      etc ....
  23. </table>


A présent je voudrais savoir comment peut-on se débrouiller pour que lorsque l'on passe la souris sur un client, toute la ligne le concernant (avec tous ses produits) peut être mise en surbrillance.
 
J'ai pensé à diviser ce plan en 2 tables pour les agréger dans une même table, mais le résultat est loin d'être top.
 
J'espère que j'ai été clair ... c'est assez difficile à expliquer.
 
Merci encore !

Reply

Marsh Posté le 17-12-2009 à 14:31:57    

Reply

Marsh Posté le 17-12-2009 à 15:39:12    

Merci beaucoup pour ton aide pataluc mais c'est pas 100% adapté à ce que je veux faire ... Sinon j'ai vu qu'il avait l'outil javascript nextSibling qui peut surbriller 2 lignes en même temps mais je vois pas tout à fait comment l'adapter, à vrai dire je débute en javascript.

Message cité 1 fois
Reply

Marsh Posté le 17-12-2009 à 15:56:08    

Magg27 a écrit :

Merci beaucoup pour ton aide pataluc mais c'est pas 100% adapté à ce que je veux faire ...


comment ca pas adapté? tu veux quoi exactement?
 
Edit: ok je crois que j'ai compris, tu veux sélectionner toutes les lignes d'un client, même si tu survole une des cases produit.
 
du coup je sais pas trop. à mon avis le plus simple serait de grouper les cellules avec une classe précise, afin de pouvoir modifier leur couleur facilement...


Message édité par pataluc le 17-12-2009 à 16:02:53
Reply

Marsh Posté le 17-12-2009 à 15:56:08   

Reply

Marsh Posté le 17-12-2009 à 16:12:26    

je te propose ca:

Code :
  1. <html>
  2.   <head>
  3.     <title></title>
  4.     <script src="jquery.js" type="text/javascript"></script>
  5.    
  6.     <script type="text/javascript">
  7.    
  8.     $(document).ready(function(){
  9.       $('td').mouseover(function(){
  10.         $("td." + $(this).attr('class')).css("background-color","#69f" );
  11.        
  12.       }).mouseout(function(){
  13.         $("td." + $(this).attr('class')).css("background-color","#fff" );
  14.       });
  16.     });
  18.    
  19.     </script>
  20.   </head>
  21.   <body>
  22.     <table id="tableone" border="1">
  23.      <tr>
  24.           <td>Nom Client</td>
  25.           <td>Pays Client</td>
  26.           <td>Produits vendus au client</td>
  27.           <td>Spécifications produit</td>
  28.      </tr>
  29.      <tr>
  30.           <td rowspan="3" class="client1">Client x</td>
  31.           <td rowspan="3" class="client1">Pays Client</td>
  32.           <td class="client1">Produit x</td>
  33.           <td class="client1">Spécification x</td>
  34.      </tr>
  35.      <tr>
  36.           <td class="client1">Produit x+1</td>
  37.           <td class="client1">Spécification x+1</td>
  38.      </tr>
  39.      <tr>
  40.           <td class="client1">Produit x+2</td>
  41.           <td class="client1">Spécification x+2</td>
  42.      </tr>
  43.      <tr>
  44.           <td rowspan="3" class="client2">Client x</td>
  45.           <td rowspan="3" class="client2">Pays Client</td>
  46.           <td class="client2">Produit x</td>
  47.           <td class="client2">Spécification x</td>
  48.      </tr>
  49.      <tr>
  50.           <td class="client2">Produit x+1</td>
  51.           <td class="client2">Spécification x+1</td>
  52.      </tr>
  53.      <tr>
  54.           <td class="client2">Produit x+2</td>
  55.           <td class="client2">Spécification x+2</td>
  56.      </tr>         
  57.     </table>
  58.   </body>
  59. </html>
 


ca semble bien marcher chez moi... par contre ca sous entend d'utiliser l'attribut class pour grouper des cellules... c'est pas über sexy, on doit pouvoir faire mieux mais pour le moment je vois pas comment.


Message édité par pataluc le 17-12-2009 à 16:14:34
Reply

Marsh Posté le 17-12-2009 à 18:00:53    

Merci pataluc !!!!! C'est formidable ce que tu as fait !! Pour ce qui est des attributs class, certes ça alourdie le code mais dans mon programme ça s'insère automatiquement avec une boucle php donc ça ne m'a pas posé problème ...
Encore merci pour tout !!! Merci aussi de m'avoir fait découvrir jQuery !


Message édité par Magg27 le 17-12-2009 à 18:05:23
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed