Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1680 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  changer couleur d'une ligne

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

changer couleur d'une ligne

n°568942
saxgard
Posté le 17-11-2003 à 13:58:01  profilanswer
 

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
mood
Publicité
Posté le 17-11-2003 à 13:58:01  profilanswer
 

n°569014
Freekill
Electron libre…
Posté le 17-11-2003 à 15:25:49  profilanswer
 

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] ?

n°569032
saxgard
Posté le 17-11-2003 à 15:37:48  profilanswer
 

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
n°569045
Freekill
Electron libre…
Posté le 17-11-2003 à 15:48:28  profilanswer
 

onclick -> ondblclick

n°569048
saxgard
Posté le 17-11-2003 à 15:50:01  profilanswer
 

Freekill a écrit :

onclick -> ondblclick


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

n°569051
Freekill
Electron libre…
Posté le 17-11-2003 à 15:52:34  profilanswer
 

de rien ;)

n°569062
saxgard
Posté le 17-11-2003 à 15:59:15  profilanswer
 

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   ;)

n°569085
Freekill
Electron libre…
Posté le 17-11-2003 à 16:14:09  profilanswer
 

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
n°569096
Freekill
Electron libre…
Posté le 17-11-2003 à 16:27:43  profilanswer
 

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
n°569137
saxgard
Posté le 17-11-2003 à 16:50:46  profilanswer
 

je te remercie je vais chnager ca  ;o)

mood
Publicité
Posté le 17-11-2003 à 16:50:46  profilanswer
 

n°569140
saxgard
Posté le 17-11-2003 à 16:52:48  profilanswer
 

ca cahnge quoi de mettre les couleurs en minuscule?

n°569142
Freekill
Electron libre…
Posté le 17-11-2003 à 16:57:07  profilanswer
 

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 ).

n°569150
Freekill
Electron libre…
Posté le 17-11-2003 à 17:05:13  profilanswer
 

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

n°569163
saxgard
Posté le 17-11-2003 à 17:10:40  profilanswer
 

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

n°569180
Freekill
Electron libre…
Posté le 17-11-2003 à 17:21:15  profilanswer
 

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]

n°569189
saxgard
Posté le 17-11-2003 à 17:29:00  profilanswer
 

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?

n°569192
saxgard
Posté le 17-11-2003 à 17:30:28  profilanswer
 

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

n°569207
Freekill
Electron libre…
Posté le 17-11-2003 à 17:42:39  profilanswer
 

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)" ).

n°569220
saxgard
Posté le 17-11-2003 à 17:51:12  profilanswer
 

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)

n°569239
Freekill
Electron libre…
Posté le 17-11-2003 à 17:58:18  profilanswer
 

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? :)

n°569489
cerel
Posté le 18-11-2003 à 08:45:57  profilanswer
 

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.

n°569494
saxgard
Posté le 18-11-2003 à 09:04:11  profilanswer
 

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..

n°569495
saxgard
Posté le 18-11-2003 à 09:04:28  profilanswer
 

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)

n°569496
saxgard
Posté le 18-11-2003 à 09:05:20  profilanswer
 

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

n°569813
cerel
Posté le 18-11-2003 à 14:02:42  profilanswer
 

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
n°569840
saxgard
Posté le 18-11-2003 à 14:12:56  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  changer couleur d'une ligne

 

Sujets relatifs
javascript avec formulaire php pour saut de ligne/liens[html] Aligner du texte à gauche et à droite sur une même ligne[resol]
[SGBD]acceder au demon mysql de easyphp en ligne de commande?Lire une ligne entière dans un fichier
asp : ligne de commande (winzip)JtextArea et couleur de texte
[Python@Blender] Ligne de commande pour executer un script python ?Comment changer les privièges sous window 2000 ou XP
[PHP] Changer couleur écriture /ligne && Mise à jour date (p.2)changer la couleur du texte selon la ligne du tmemo , possible ?
Plus de sujets relatifs à : changer couleur d'une ligne

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.062 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR