modifier attribut <td> par un onClick

01 sept. 2006, 11:24

Bonjour,

Sur mon site, j'affiche une liste de T-shirts. Cette liste est un tableau. J'affiche mes motifs, sur fond transparent, et j'affiche derrière chaque motif une couleur de fond sur mon <td> (un tableau php contient la liste de mes couleurs de fonds) aléatoirement.

J'ai aussi une liste de coloris, et j'aimerais que lorsque l'on clique sur l'un des coloris, cela change tous les fonds de <td> en cette couleur.

Aucun problème pour savoir quelle couleur a été cliquer, je la reconnais par le nom du pictogramme-coloris.

J'aimerais juste savoir comment faire ce changement en javascript ? Comment appliquer le changement à toutes mes td ?

Une id sur la table, puis getElementById[id].td.background-image ?

quelque chose dans ce genre ?

Merci d'avance

01 sept. 2006, 12:14

Tu peux effectivement boucler sur chacun des id de tes cellules, et changer le style ou ne le faire que sur le tableau.. La syntaxe serait d'avantage quelque chose du genre :

Code : Tout sélectionner

document.getElementById("id_cellule").style.bgColor = "#fff";

01 sept. 2006, 12:19

Comment faire pour faire une boucle sur mon onclick ?

pour le moment, les pictos qui affichent les backgrounds disponibles sont comme ça :

echo "<img src=\"graphs/shop/backgrounds/".$picto[$pic]."\" alt=\"\" style=\"cursor:pointer;\" 
onClick=\"document.getElementById(\"td1\").style.backgroundImage='url(graphs/shop/backgrounds/".$picto[$pic].")'\" /> \n";

mon nombre de <td> à modifier est independant du nombre de fonds disponibles, j'ai du mal a voir comment faire.

01 sept. 2006, 12:28

Le plus simple est de faire appel à une fonction js dans ton onClick.. ca sera plus facile à lire

Quant à la boucle de tes id, tu peux du coup faire un for() :

Code : Tout sélectionner

<img ... onClick="javascript:color('nom_du_picto')"; >

<script>
function color(picto) {
  for(var i=0; i< nbCellule; i++) {
    document.getElementById("cellule_"+i).style ...
    // en supposant tes id de la forme cellule_0, cellule_1, cellule_2 ...
  }
}
</script>

modifier attribut <td> par un onClick

Qui est en ligne