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

**fred61** · 25/03/2009, 10h56

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.

**jln13** · 25/03/2009, 10h59

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.

**jln13** · 25/03/2009, 11h09

sur le onchange plutot que le onclick d'ailleurs

**fred61** · 25/03/2009, 11h26

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 ?

**jln13** · 25/03/2009, 11h39

oui tu peux specifier un id par cellule.

**fred61** · 25/03/2009, 13h40

Merci mais ça fonctionne pas, je vois pas ou j'ai fais une erreur :

J'ai fais mes deux classes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#fondvert
{ background-color: green ;}
#fondrouge
{ background-color: red ; }

J'ai donné un nom à ma cellule du tableau :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Merci.

**Bovino** · 25/03/2009, 13h47

Tu définis des style pour des id et tu ajoutes une class...

**jln13** · 26/03/2009, 09h27

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.

**Walterbelo** · 27/03/2009, 02h19

Clic sur un bouton => changement de couleur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

JavaScript

Discussions similaires

Partager

Partager