changer couleur d'une ligne

changer couleur d'une ligne - HTML/CSS - Programmation

Marsh Posté le 17-11-2003 à 13:58:01    

Voila  
en faite j'ai plusieurs ligne de produits contenat de nombreux champs dans un formulaire
ce que j'aimerai c'est creer un bouton qui permet de coloriser toute la ligne (pour reconnaitre facilement sur quelle ligne et par consequent sur quelle produit on est en train de travailler.
 
si je fais:

Code :
  1. <form ...>
  2. <table>
  3. <? for (.. )
  4. {?>
  5. <tr OnClick="javascript:this.style.background='#80a0e0'">
  6. <td>
  7. champ1 formulaire
  8. </td>
  9. ....
  10. <td>
  11. </table>
  12. champ x
  13. </td>
  14. </tr>
  15. <?
  16. }
  17. ?>
  18. </form>


 
par consequent j'aimerai pouvoir faire quelquepart un bouton qui permet de changer de couleur juste une ligne (donc un produit)
parceque la methode que j'utilise bin ca change de couleur la ligne a chaque fois que je clique n'importe  ou sur la ligne  ;o)
 
voilou merci d'avance


Message édité par saxgard le 17-11-2003 à 15:25:02
Reply

Marsh Posté le 17-11-2003 à 13:58:01   

Reply

Marsh Posté le 17-11-2003 à 15:25:49    

Code :
  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. var was;
  5. var col_on = '#FFCC33';
  6. var col_off = '#CCCCCC';
  8. function light(what)
  9. {
  10. where = what;
  11. where.style.background = col_on;
  13. if (!was) { was = where; }
  14. else
  15. {
  16.  was.style.background = col_off;
  17.  was = where;
  18. }
  20. return false;
  21. }
  22. </script>
  24. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  25.   <tr style="background: #CCCCCC;" onclick="light(this);">
  26.     <td>bleh</td>
  27.     <td>blah</td>
  28.   </tr>
  29.   <tr style="background: #CCCCCC;" onclick="light(this);">
  30.     <td>bleh</td>
  31.     <td>blah</td>
  32.   </tr>
  33.   <tr style="background: #CCCCCC;" onclick="light(this);">
  34.     <td>bleh</td>
  35.     <td>blah</td>
  36.   </tr>
  37. </table>
  39. </body>
  40. </html>


 
 [:kurrupt] ?

Reply

Marsh Posté le 17-11-2003 à 15:37:48    

Freekill a écrit :

Code :
  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. var was;
  5. var col_on = '#FFCC33';
  6. var col_off = '#CCCCCC';
  8. function light(what)
  9. {
  10. where = what;
  11. where.style.background = col_on;
  13. if (!was) { was = where; }
  14. else
  15. {
  16.  was.style.background = col_off;
  17.  was = where;
  18. }
  20. return false;
  21. }
  22. </script>
  24. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  25.   <tr style="background: #CCCCCC;" onclick="light(this);">
  26.     <td>bleh</td>
  27.     <td>blah</td>
  28.   </tr>
  29.   <tr style="background: #CCCCCC;" onclick="light(this);">
  30.     <td>bleh</td>
  31.     <td>blah</td>
  32.   </tr>
  33.   <tr style="background: #CCCCCC;" onclick="light(this);">
  34.     <td>bleh</td>
  35.     <td>blah</td>
  36.   </tr>
  37. </table>
  39. </body>
  40. </html>


 
 [:kurrupt] ?


 
j'ai toujours le meme pobleme  
 
quand je clique une fois ca va ca s'eclaircit mais quand je clique a nouveau dans un des champs de la ligne  pour saisir une valeur , bin ca s'eteint et impossible de le remettre  (sauf si je change de ligne) , et meme si on pouvait le remettre bin ca ferai tt le temps ca   (s'eteindre , se rallumer , s'eteindre .. etc..)
 
et moi je voudrait eviter ca  , c'est pour ca que j'avais penser a faire un bouton qui ferai changer la couleur de la ligne uniquelment si je clique sur celui-ci et non pas si je clique n'importe  ou sur la ligne  
 
mais je te remercie ,c'est au moin une piste
 
d'autres suggestions?


Message édité par saxgard le 17-11-2003 à 15:40:04
Reply

Marsh Posté le 17-11-2003 à 15:48:28    

onclick -> ondblclick

Reply

Marsh Posté le 17-11-2003 à 15:50:01    

Freekill a écrit :

onclick -> ondblclick


 
ah génial je savais pas qu'il existait cette evenement
je te remercie

Reply

Marsh Posté le 17-11-2003 à 15:52:34    

de rien ;)

Reply

Marsh Posté le 17-11-2003 à 15:59:15    

Freekill a écrit :

de rien ;)


 
c'est cool quand certain arrive a nous répondre comme ca aussi aisement   :D  
je me voyais deja avec un gros développement en javascript   ;)

Reply

Marsh Posté le 17-11-2003 à 16:14:09    

Au fait, y'avait un bug dans la fonction.
 
Ceci devrait fonctionner mieux :
 

Code :
  1. var was;
  2. var col_on = '#ffcc33'; // EN MINUSCULES !
  3. var col_off = '#cccccc'; // EN MINUSCULES !
  5. function light(what)
  6. {
  7. where = what;
  9. if (!was)
  10. {
  11.  where.style.background = col_on;
  12. }
  13. else if (where == was)
  14. {
  15.  if (where.style.background == col_on) { where.style.background = col_off;}
  16.  else { where.style.background = col_on; }
  17. }
  18. else
  19. {
  20.  where.style.background = col_on;
  21.  was.style.background = col_off;
  22. }
  24. was = where;
  26. return false;
  27. }


Message édité par Freekill le 17-11-2003 à 16:15:49
Reply

Marsh Posté le 17-11-2003 à 16:27:43    

Tiens et si tu veux toujours ton bouton avec simple click, y'a aussi ceci qui fonctionne :
 

Code :
  1. <td><img src="imagalacon.gni" onclick="light(this.parentNode.parentNode);" /></td>


 
'this.parentNode.parentNode'? [:meganne]
 
Un peu spécial, mais tant que ça marche? [:ddr555]


Message édité par Freekill le 17-11-2003 à 16:27:56
Reply

Marsh Posté le 17-11-2003 à 16:50:46    

je te remercie je vais chnager ca  ;o)

Reply

Marsh Posté le 17-11-2003 à 16:50:46   

Reply

Marsh Posté le 17-11-2003 à 16:52:48    

ca cahnge quoi de mettre les couleurs en minuscule?

Reply

Marsh Posté le 17-11-2003 à 16:57:07    

Lorsqu'il change l'attribut background d'une ligne, il le met d'office en minuscule, même si la variable était en majuscule au départ. ( ou alors il le passe en minuscules quand il le récupère, ce qui revient au même )
 
Mais lors de la vérification après ça ne fonctionne plus ( le "==" est visiblement case-sensitive ).

Reply

Marsh Posté le 17-11-2003 à 17:05:13    

Tiens c'est bizarre, ça ne le fait plus maintenant? :heink:
 
Bon, dans le doute tu peux toujours changer
 

Code :
  1. if (where.style.background == col_on) { where.style.background = col_off;}


 
par
 

Code :
  1. if (where.style.background.toLowerCase == col_on.toLowerCase) { where.style.background = col_off;}


 
Juste histoire d'être sûr? :D

Reply

Marsh Posté le 17-11-2003 à 17:10:40    

Freekill a écrit :

Tiens c'est bizarre, ça ne le fait plus maintenant… :heink:
 
Bon, dans le doute tu peux toujours changer
 

Code :
  1. if (where.style.background == col_on) { where.style.background = col_off;}


 
par
 

Code :
  1. if (where.style.background.toLowerCase == col_on.toLowerCase) { where.style.background = col_off;}


 
Juste histoire d'être sûr… :D


 
ok je fais  ;o)
merci

Reply

Marsh Posté le 17-11-2003 à 17:21:15    

Argh non, y'a deux problèmes en fait.
 
Pour IE le background qu'on a défini est comme la variable, mais en minuscules, ce qui donne "ffcc00".
 
Alors que selon Mozilla le background équivaut à "rgb(255, 204, 51) none repeat scroll 0% 0%"?  :heink:
 
Et si on demande juste la couleur à Mozilla (avec style.backgroundColor), il retourne "rgb(255, 204, 51)".
 
Super pratique?  [:mlc]

Reply

Marsh Posté le 17-11-2003 à 17:29:00    

Freekill a écrit :

Argh non, y'a deux problèmes en fait.
 
Pour IE le background qu'on a défini est comme la variable, mais en minuscules, ce qui donne "ffcc00".
 
Alors que selon Mozilla le background équivaut à "rgb(255, 204, 51) none repeat scroll 0% 0%"…  :heink:
 
Et si on demande juste la couleur à Mozilla (avec style.backgroundColor), il retourne "rgb(255, 204, 51)".
 
Super pratique…  [:mlc]  


 
dc en gros la ca ne marche qu'avce IE?

Reply

Marsh Posté le 17-11-2003 à 17:30:28    

la j'ai essayé avce netscape il n'ya  aucun pb

Reply

Marsh Posté le 17-11-2003 à 17:42:39    

Saxgard a écrit :

la j'ai essayé avce netscape il n'ya  aucun pb


 
Si, il y a un problème quand on a mis en couleur une ligne et qu'on re-clique dessus.  
 
Ca ne remet pas la couleur de départ sous mozilla, parce que la vérification échoue ("#FFCC00" n'est pas égal à "rgb(255, 204, 0)" ).

Reply

Marsh Posté le 17-11-2003 à 17:51:12    

Freekill a écrit :


 
Si, il y a un problème quand on a mis en couleur une ligne et qu'on re-clique dessus.  
 
Ca ne remet pas la couleur de départ sous mozilla, parce que la vérification échoue ("#FFCC00" n'est pas égal à "rgb(255, 204, 0)" ).


 
ah a la limite pour moi ca ne sera pas trop grave car tous les utilisateurs utiliseront IE ;o)

Reply

Marsh Posté le 17-11-2003 à 17:58:18    

Saxgard a écrit :


 
ah a la limite pour moi ca ne sera pas trop grave car tous les utilisateurs utiliseront IE ;o)


 
Nan, tout doit être compatible ! :o
 
Bon, j'avais fait un gros fix pour mozilla qui convertissait les couleurs en "rgb(xxx, xxx, xxx)", mais c'était peu élégant.
 
Ceci est nettement mieux :
 

Code :
  1. var was;
  2. var col_on = '#FFCC33';
  3. var col_off = '#CCCCCC';
  5. function light(what)
  6. {
  7. where = what;
  9. if (!was)
  10. {
  11.  where.style.backgroundColor = col_on;
  12.  was = where;
  13. }
  14. else if (where == was)
  15. {
  16.  where.style.backgroundColor = col_off;
  17.  was = "";
  18. }
  19. else
  20. {
  21.  where.style.backgroundColor = col_on;
  22.  was.style.backgroundColor = col_off;
  23.  was = where;
  24. }
  26. return false;
  27. }


 
Là tu peux mettre majuscules ou miniscules, et ça passe sur IE, Moz et Opera? :)

Reply

Marsh Posté le 18-11-2003 à 08:45:57    

Pourquoi ne pas passer par les CSS ??
Vous definissez 2 classes :
 
col_on {
 background-color=#FFCC33
}
col_off {
 background-color=#CCCCCC
}
 
Ensuite vous utilisez "className" pour changer les classes des elements.

Reply

Marsh Posté le 18-11-2003 à 09:04:11    

Cerel a écrit :

Pourquoi ne pas passer par les CSS ??
Vous definissez 2 classes :
 
col_on {
 background-color=#FFCC33
}
col_off {
 background-color=#CCCCCC
}
 
Ensuite vous utilisez "className" pour changer les classes des elements.


 
oauis mais comment tu met tes conditions?si ta deja la couleur jaune tu met la couleur grise etc..

Reply

Marsh Posté le 18-11-2003 à 09:04:28    

Freekill a écrit :


 
Nan, tout doit être compatible ! :o
 
Bon, j'avais fait un gros fix pour mozilla qui convertissait les couleurs en "rgb(xxx, xxx, xxx)", mais c'était peu élégant.
 
Ceci est nettement mieux :
 

Code :
  1. var was;
  2. var col_on = '#FFCC33';
  3. var col_off = '#CCCCCC';
  5. function light(what)
  6. {
  7. where = what;
  9. if (!was)
  10. {
  11.  where.style.backgroundColor = col_on;
  12.  was = where;
  13. }
  14. else if (where == was)
  15. {
  16.  where.style.backgroundColor = col_off;
  17.  was = "";
  18. }
  19. else
  20. {
  21.  where.style.backgroundColor = col_on;
  22.  was.style.backgroundColor = col_off;
  23.  was = where;
  24. }
  26. return false;
  27. }


 
Là tu peux mettre majuscules ou miniscules, et ça passe sur IE, Moz et Opera… :)


 
cool  ;o)

Reply

Marsh Posté le 18-11-2003 à 09:05:20    

cela dit en parlant d'incompatibilité , j'en ai une bien chiante , j'utilise les overflow en CSS et c pas compatible netscape.  :(

Reply

Marsh Posté le 18-11-2003 à 14:02:42    

Saxgard a écrit :


 
oauis mais comment tu met tes conditions?si ta deja la couleur jaune tu met la couleur grise etc..
 


 
Ben au lieu d'utiliser ".style.backgroundColor", tu utilises ".className"
En faisant comme ca, tu peux changer la couleur, mais egalement d'autres elements


Message édité par cerel le 18-11-2003 à 14:06:37
Reply

Marsh Posté le 18-11-2003 à 14:12:56    

Cerel a écrit :


 
Ben au lieu d'utiliser ".style.backgroundColor", tu utilises ".className"
En faisant comme ca, tu peux changer la couleur, mais egalement d'autres elements


 
ah ouais c pas bete du tout ;o)
merci merci

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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