[CSS+JS] clique sur checkbox modifie le background-color

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
31
$PWD
p4bl0.net
Bonjour.

Je voudrais, pour une des pages de mon site (pas encore en ligne), qui comporte un tableaux, que quand on coche un checkbox, la ligne du tableau correspondante change de couleur de fond.

Voilà mon code qui ne marche pas :
Bloc de code:
<table>
<tr style="backgound-color:#fff;" name="row1">
    <td><input type="checkbox" onclick="row1.style.value='backgound-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
 

Marc-André

Membre émérite
24 Juillet 2003
559
17
44
Ottawa
truk2oof a dit:
Bonjour.

Je voudrais, pour une des pages de mon site (pas encore en ligne), qui comporte un tableaux, que quand on coche un checkbox, la ligne du tableau correspondante change de couleur de fond.

Voilà mon code qui ne marche pas :
Bloc de code:
<table>
<tr style="backgound-color:#fff;" name="row1">
    <td><input type="checkbox" onclick="row1.style.value='backgound-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
Je sais pas trop comment le faire via un checkbox par contre j'ai fouillé dans une de mes pages ou j'ai un truc qui le fais via un mouseover je te transmet le code... je ne me souviens plus ou je l'avais trouvé... mais en gros il ressemble à ceci
À placer dans le Head
Bloc de code:
<script language="JavaScript">
<!--
var backColor = new Array();
//mettre tes couleur ici
backColor[0] = '#FFFFFF';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';


function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}

//-->
</script>
Ensuite dans le body où tu en as besoin

Bloc de code:
<!-- Pour un MouseOver
Insere le chiffre de ta couleur que tu veux dans () de ChangeBG()
//-->

<a href="#" onMouseOver="javascript:changeBG(2)">Change</a>

<!--Avec un clic de souris
Insere le chiffre de ta couleur que tu veux dans () de ChangeBG()
//-->

<a href="javascript:changeBG(1)">Change</a>
Marc-André
 

Marc-André

Membre émérite
24 Juillet 2003
559
17
44
Ottawa
truk2oof a dit:
ton script marche, mais pas appliqué à mon problème : je n'arrive pas à accéder à ma ligne de tableau (comme on utilise document pour accéder à la page)


Y a personne qui sait faire ça ?
J'ai trouvé ce que tu recherche

Bloc de code:
<style>
.td1 { background-color: #990000;color : #ffffff; }
.td2 { background-color: #ffffcc;color : #336699; }
</style>

<table width=200 border=1>
<tr id="t1" class=td1 onClick=javascript:appelfn('t1')><td>ton texte</td><tr>
<tr id="t2" class=td1 onClick=javascript:appelfn('t2')><td>ton texte</td><tr>
<tr id="t3" class=td1 onClick=javascript:appelfn('t3')><td>ton texte</td><tr>
<tr id="t4" class=td1 onClick=javascript:appelfn('t4')><td>ton textet</td><tr>
</table>

<script language=javascript> 
function appelfn(rno) {
for (i=1;i<=4;i++) {
document.getElementById('t'+i).className='td1';
}
var tmp = document.getElementById(rno); 
tmp.className='td2';
}
</script>
Marc-André