checkbox change couleur fond ligne tableau

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

24 novembre 2005 à 18:40:59

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 :

<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

romainqcz

24 novembre 2005 à 22:12:55

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:

Normalement ca devrait marcher

ratdecav

24 novembre 2005 à 23:39:21

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.

++

p4bl0

25 novembre 2005 à 15:25:30

Evidemment, c'est dans un formulaire.

Quand je fait ça, ça marche :

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

Fieldset

25 novembre 2005 à 17:04:33

Salut je me suis penché sur ton problème environ une heure et j'ai galéré pour arriver à te pondre ceci :

p4bl0

25 novembre 2005 à 17:17:23

wouaw !!! merci beaucoup !!!

Fieldset

25 novembre 2005 à 17:53:12

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

p4bl0

25 novembre 2005 à 18:16:49

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 :

function change(box, tr)
{
if (document.formulaire.box.checked == true)
{
tr.style.backgroundColor = '#ffff99';
}
else
{
tr.style.backgroundColor = '#99ccff';
}
}

<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

Fieldset

25 novembre 2005 à 20:06:44

Ahahahah j'ai réussiiiiiiii youhouuu

Le code fonctionne Sous Firefox et sous IE 6.0

p4bl0

25 novembre 2005 à 21:24:46

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