[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS / Javascript > checkbox change couleur fond ligne tableau > Lecture du sujet

checkbox change couleur fond ligne tableau

Séléction d'une checkbox provoque le changement de la couleur d'une ligne d'un tableau

Vous devez être inscrit pour pouvoir poster des messages

Auteur	Message
Page : 1
1 visiteur sur ce sujet (1 anonyme)
Page : 1
p4bl0	# Posté le 24/11/2005 à 18:40:59
/(bb\|[^b]{2})/ Groupe : Membres	Bonjour. Je voudrais, pour une des pages de mon site (pas encore en ligne), qui comporte un tableaux, que quand on coche une checkbox, la ligne du tableau correspondante change de couleur de fond. Voilà mon code qui ne marche pas : Code : HTML <table> <tr style="background-color:#fff;" name="row1"> <td><input type="checkbox" onclick="row1.style.value='background-color:#ff9;'" /></td> <td>azertyw</td> <td>uiopqsd</td> <td>fghjklm</td> </tr> </table> Biensûr, il y a plusieurs ligne dans le tableau, mais c'est juste pour vous montrer comment j'ai fait ça. Savez vous comment faire cela ?? merci Édité le 24/11/2005 à 18:42:06 par p4bl0 ••• http://p4bl0.net/ •• p4bl0's blog •••
Romain128	# Posté le 24/11/2005 à 22:12:55
They stealin mah nowel è_é Groupe : Membres	Salut, Essaye de mettre ton tableau entre deux balises <form>, et donne lui un nom (par ex:form).Ensuite il faut modifier lègèrement le code Javascript: Code : JavaScript <input type="checkbox" onclick="document.form.row1.style.value='background-color:#ff9;'" /> Normalement ca devrait marcher @+ Édité le 24/11/2005 à 22:13:29 par Romain128 Code-ami Mario Kart Wii : 0473 7908 5324
ratdecav	# Posté le 24/11/2005 à 23:39:21
Groupe : Membres	Bonsoir tout le monde , je ne suis pas sur que ça marche de mettre un onClick dans un checkbox, alors tu peux essayer ça : <tr style="background-color:#fff;" onClick="this.style.backgroundColor='#ff9'"> <td><input type="checkbox"></td> dans un <form> comme dis Romain128. ++ Liste des films déjà proposés
p4bl0	# Posté le 25/11/2005 à 15:25:30
/(bb\|[^b]{2})/ Groupe : Membres	Evidemment, c'est dans un formulaire. Quand je fait ça, ça marche : Code : HTML <tr id="row3" style="background-color:#9cf;"> <td><input type="checkbox" value="3" onclick="row3.style.backgroundColor='#ffff99'" /></td> <td>test</td> <td>testest</td> <td style="text-align:right;">xxxxxx</td> </tr> mais comment je peut faire pour que lorsqu'on décoche la checkbox, la couleur de départ revienne ?? Édité le 25/11/2005 à 15:35:25 par p4bl0 ••• http://p4bl0.net/ •• p4bl0's blog •••
Fieldset	# Posté le 25/11/2005 à 17:04:33
Groupe : Membres	Salut je me suis penché sur ton problème environ une heure et j'ai galéré pour arriver à te pondre ceci : Code : JavaScript <script> function change() { if (document.formulaire.row3_box.checked == true) { row3.style.backgroundColor = '#ffff99'; } else { row3.style.backgroundColor = '#99ccff'; } } </script> <form name="formulaire"> <table> <tr id="row3" style="background:#99ccff;"> <td><input type="checkbox" name="row3_box" onClick="change()" /></td> <td>test</td> <td>testest</td> <td>xxxxxx</td> </tr> </table> </form> Pour vous aider à débuger vos script JavaScript, installez FireBug (Un module pour FireFox) Mon Tchat Ajax
p4bl0	# Posté le 25/11/2005 à 17:17:23
/(bb\|[^b]{2})/ Groupe : Membres	wouaw !!! merci beaucoup !!! ••• http://p4bl0.net/ •• p4bl0's blog •••
Fieldset	# Posté le 25/11/2005 à 17:53:12
Groupe : Membres	Ben derien mais si quelqu'un d'un peu plus experimenté passe il pourra t'améliorer le code parce que la le code ne fonctionne que pour une cellule ou bien il faudra que tu recopies le code autant de fois que tu as de cellules mdr donc ce n'est pas très pratique et sa me dérange un peu de te laisser un tel code... donc je continue de chercher et je te dis dès que j'ai la réponse Pour vous aider à débuger vos script JavaScript, installez FireBug (Un module pour FireFox) Mon Tchat Ajax
p4bl0	# Posté le 25/11/2005 à 18:16:49
/(bb\|[^b]{2})/ Groupe : Membres	Justement, tout marche bien, tant que je n'ai qu'une seul ligne dans mon tableau, maintenant, comme j'ai plusieurs ligne (générer par php à partir d'une requête mysql), ça marche pas, je suis désolé de vous demander encore de l'aide, voici ce que j'ai fait : Code : JavaScript function change(box, tr) { if (document.formulaire.box.checked == true) { tr.style.backgroundColor = '#ffff99'; } else { tr.style.backgroundColor = '#99ccff'; } } Code : HTML <tr id="row<?php echo $rq['id']; ?>" style="background-color:#fff;"> <td><input type="checkbox" value="<?php echo $rq['id']; ?>" id="row<?php echo $rq['id']; ?>cb" onClick="change('row<?php echo $rq['id']; ?>cb', 'row<?php echo $rq['id']; ?>')" /></td> <td>sfger</td> <td>qsrf</td> <td>refe</td> </tr> J'ai regardé la source généré par le php, la fonction appelé est bien : change('rowXcb', 'rowX') où X est un entier. l'id de la checkbox est bien 'rowXcb', et celle de la ligne est bien 'rowX'. Encore une foi, je suis désolé, mais je suis vraiment une daube en Javascript Édité le 25/11/2005 à 18:19:08 par p4bl0 ••• http://p4bl0.net/ •• p4bl0's blog •••
Fieldset	# Posté le 25/11/2005 à 20:06:44
Groupe : Membres	Ahahahah j'ai réussiiiiiiii youhouuu Code : JavaScript <script> function change(moi) { if (document.formulaire.elements[moi].checked == true) { document.getElementById(moi).style.backgroundColor = '#ffff99'; } else { document.getElementById(moi).style.backgroundColor = '#99ccff'; } } </script> <form name="formulaire"> <table> <tr id="row1" style="background:#99ccff;"> <td><input type="checkbox" name="row1" onClick="change(this.name)" /></td> <td>Première ligne</td> </tr> <tr id="row2" style="background:#99ccff;"> <td><input type="checkbox" name="row2" onClick="change(this.name)" /></td> <td>Seconde ligne</td> </tr> </table> </form> Le code fonctionne Sous Firefox et sous IE 6.0 Édité le 25/11/2005 à 21:15:36 par Fieldset Pour vous aider à débuger vos script JavaScript, installez FireBug (Un module pour FireFox) Mon Tchat Ajax
p4bl0	# Posté le 25/11/2005 à 21:24:46
/(bb\|[^b]{2})/ Groupe : Membres	C'est génial merci beaucoup !!!!! Ç a marche du tonnerre !!!!! mercimerci #Edit : pour ceux qui sont intéressés, le script marche aussi sous Safari et Opéra Édité le 25/11/2005 à 21:43:32 par p4bl0 ••• http://p4bl0.net/ •• p4bl0's blog •••