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

[p4bl0]

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 :

<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

 

[p4bl0]

Personne ne peut m'aider ??

 

[Marc-André]

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 :

<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

<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

<!-- 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é

 

[p4bl0]

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 ?

 

[Marc-André]

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

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

 

[p4bl0]

youpi merci ^^