Modifier couleur de fond d'une cellule d'un tableau dynamiquement.

Version imprimable

25/03/2009, 10h56
fred61

Modifier couleur de fond d'une cellule d'un tableau dynamiquement.

Bonjour,

Savez-vous s'il est possible de modifier dynamiquement la couleur de fond d'une cellule d'un tableau html ? Je développe :

En fait j'ai une liste déroulante avec une réponse, oui ou non, si oui la case du tableau à coté est de couleur verte, si la réponse est non => modification automatique de la cellule en rouge.

J'ai fais des recherche mais apparement c'est impossible, mais si vous avez des idées je suis preneur :)

Merci.
25/03/2009, 10h59
jln13

salut,

impossible n'est pas francais c'est pourtant bien connu :o)

Tu definis 2 classes css avec les 2 couleurs que tu veux et tu appelle une fonction JS sur le onclick de ton select qui te modifie le nom de la classe selon l'option selectionnee.
25/03/2009, 11h09
jln13

sur le onchange plutot que le onclick d'ailleurs ;)
25/03/2009, 11h26
fred61

Ok merci, mais est ce qu'il est possible de définir un nom pour une cellule spécifique d'un tableau ? pour pas modifier le tableau entier ?
25/03/2009, 11h39
jln13

oui tu peux specifier un id par cellule.
25/03/2009, 13h40
fred61
Merci mais ça fonctionne pas, je vois pas ou j'ai fais une erreur :

J'ai fais mes deux classes :
Code:

1 2 3 4 #fondvert { background-color: green ;} #fondrouge { background-color: red ; }
J'ai donné un nom à ma cellule du tableau :

Code:

<td name="cel1'' id='fondvert'>

et j'ai fais une fonction javascript que j'appelle sur le onChange de ma liste déroulante avec une ligne :

Code:

document.cel1.setAttribute("class","fondrouge") ;

Est ce que j'ai fais des erreurs de syntaxe quelque part ou utilisé une mauvaise fonction ?

Merci.
25/03/2009, 13h47
Bovino

Tu définis des style pour des id et tu ajoutes une class...
26/03/2009, 09h27
jln13

Et tu as aussi une erreur de frappe dans ton name cel1.
Tu as ouvert le name avec un guillemet double et tu l'as refermé avec 2 guillemets simples.

Clic sur un bouton => changement de couleur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
<style type="text/css">
td.fondvert
{ background-color: green ;color: white ;}
td.fondrouge
{ background-color: red ; color: white ;}
</style>
<script type="text/javascript">
function cc(idcol) {
	class=document.getElementById(idcol).className;
//	alert(class+" / "+idcol);
	if (class=="fondrouge")
	{document.getElementById(idcol).className="fondvert"}
	 else
 {document.getElementById(idcol).className="fondrouge"}
}
</script>	
</head>
<body>
Change la couleur de la colonne 1 : &nbsp
<input type="button" value="GO" onclick="cc('c11')">
<br>
Change la couleur de la colonne 2 : &nbsp
<input type="button" value="GO" onclick="cc('c12')">
<br>	
<table>
<tr>