[POO] Changer la couleur de fond d'un tableau

Bonjour,

Ce que je voudrais faire c'est changer la couleur d'un tableau en cliquant sur un lien, l'infos couleur est passé en paramètre de la fonction appelé avec onClick.

En fait j'ai un pannel de couleur, et quand je clique dessus, selon le radio bouton cochés, le code couleur se met dans le bon champ texte, cela ca marche sans problème. J'arrive à changer la couleur de fong 'bgColor' et la couleur de texte 'fgColor' mais pour la couleur de fond du tableau, je n'y arrive pas, peut-être avec du css et du javascript mais je n'arrive pas à trouver de la doc qui conviennent à mon problème.

Se serait gentil de m'aider, si il faut une partie de code dites le moi je suis total débutant en javascript mais pas en programmation (je fais déjà : PHP, ASM, JAVA) donc j'arrive à comprendre si vous me redirigez vers la doc d'une fonction aduéquate.

même pas un petit semblant de solution???

En procédant de la manière suivante je n'ai pas de problème:

Pour le <INPUT> et le <TD> je change le style en javacript en maniulant la proprièté objet.style.backgroundColor = "maCouleur";

Pour la couleur du texte tu peux utliliser objet.style.color = "maCouleur";

Attention à la casse dans les deux cas.

Voici un petit exemple qui illustrera la méthode en espérant que ça réponde à ta question:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
<head>
<title></title>
<script type="text/javascript">
// Valeur par défaut de la couleur de ma cellule
var kTdBackgroundColorDefaultValue = 	"#ffffff"; // blanc
var kTdColorDefaultValue =	 				"#000000"; // Noir
 
	// changer la couleur du du TD ************
	function changeColors(idCible, idFondColor, idTextColor)
   {	
   	// référence à mon élément (la cellule dont je veux changer la couleur de fond)
   	oCible = document.getElementById(idCible);
      // Référence à mon input (là j'y ai mis la couleur ex: #FFFF00)
   	oInputFondColor = document.getElementById(idFondColor);
		oInputTextColor = document.getElementById(idTextColor);
 
      // Gerer les exceptions
      try
      {
      	// Affecter la couleur du fond attention à la casse
     		oCible.style.backgroundColor = oInputFondColor.value;
       	// Affecter la couleur du texte
     		oCible.style.color = oInputTextColor.value;         
      }
      // Si ça merde
     	catch(e)
      {
      	// j'informe l'utilisateur de l'erreur soulevée
      	alert(e.message + '\n' + 'oTd.style.backgroundColor = ' + oInputFondColor.value);
         // j'affecte au td la couleur de fond définie au début de mon script
         oCible.style.backgroundColor = kTdBackgroundColorDefaultValue;
			oCible.style.color = kTdColorDefaultValue;         
      }
   }
</script>
</head>
<body>
 
<table border="1">
	<tr>
   	<td id="td1" name="td1Name">
      	tr1,td1
      </td>
   	<td>
      	<input type="text" id="input1" value="input" readonly="1"></input>
      </td>      
   </tr>
</table>
<br />
<br />
<fieldset>
	<legend><b>ACTIONS SUR (TD)</b></legend>
   <button onClick="changeColors('td1', 'idInputTdBackgroundColor','idInputTdColor')">
   	CHANGER LA COULEUR
   </button>
   &nbsp;FOND >>    
	<input type="text" id="idInputTdBackgroundColor" value="#ff0000"></input>
   &nbsp;TEXTE >> 
	<input type="text" id="idInputTdColor" value="#ff0000"></input>   
</fieldset>
<br />
<fieldset>
	<legend><b>ACTIONS SUR (INPUT)</b></legend>
   <button onClick="changeColors('input1', 'idInputTextBackgroundColor','idInputTextColor')">
   	CHANGER LA COULEUR
   </button>
   &nbsp;FOND >>    
	<input type="text" id="idInputTextBackgroundColor" value="#ff0000"></input>
   &nbsp;TEXTE >> 
	<input type="text" id="idInputTextColor" value="#ff0000"></input>   
</fieldset>
</body>
</html>

A +

Eric