changement couleur de fond et de texte [Résolu]

avalokitech · 19/09/2011, 13h47

Bonjour,
Je souhaite changer la couleur du fond et du texte dans un tableau html.
Voici le code incriminé :

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
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
75
76
77
78
79
80
81
82
83
84
85
 
<html>
<head>
<title></title> 
<script language="javascript" type="text/javascript">
function choisirFond(choix1)
{
	var xcouleur = choix1.options[choix1.options.selectedIndex].id;
	if(xcouleur!='def')
	{
		document.getElementById("tab").style.backgroundColor=xcouleur;
		document.form.fond1.value=xcouleur
		alert(document.form.fond1.value);
	} else {
		document.getElementById("tab").style.backgroundColor="white";	  
	}
}
function choisirTexte(choix2)
{
	var ycouleur = choix2.options[choix2.options.selectedIndex].id;
	if(ycouleur!='def')
	{
		document.getElementById("texte").style.color=ycouleur;
		document.form.text1.value=ycouleur;
		alert(document.form.text1.value);
	} else {
		document.getElementById("texte").style.color="black"; 
	}
}
function soumis() {
	alert("Soumis, Fond:"+document.form.fond1.value
	+" couleur: "+document.form.text1.value)
}
</script>
</head>
 
<body>
<form action="recup.php" method="post" name="form" onsubmit="soumis()">
	<table width="200" border="2">
		<tr id="tab" bgcolor="" id="texte" style="color: red"> 
		  <td>Couleur</td>
		  <td>
		    <select name="select_fond" onchange="choisirFond(this)">
		      <option id="def" selected style="background:white">Choisir une couleur...</option>
		      <option id="blue"		 	style="background:blue">blue</option>
		      <option id="chocolate" 	style="background:chocolate">chocolate</option>
		      <option id="red" 			style="background:red">red</option>
		      <option id="yellow" 		style="background:yellow">yellow</option>
		      <option id="green" 		style="background:green">green</option>
		      <option id="cyan" 		style="background:cyan">cyan</option>
		      <option id="tomato" 		style="background:tomato">tomato</option>
		    </select>
		  </td>
		</tr>
		<tr id="tab" bgcolor="" id="texte" style="color: red">
		  <td>Ecrit</td>
		  <td>
		    <select name="select_texte" onchange="choisirTexte(this)">
		      <option id="def" selected style="background:black">Choisir une couleur...</option>
		      <option id="blue" 		style="color:blue">blue</option>
		      <option id="chocolate" 	style="color:chocolate">chocolate</option>
		      <option id="red" 			style="color:red">red</option>
		      <option id="yellow" 		style="color:yellow">yellow</option>
		      <option id="green" 		style="color:green">green</option>
		      <option id="cyan" 		style="color:cyan">cyan</option>
		      <option id="tomato" 		style="color:tomato">tomato</option>
		    </select>
		  </td>
		</tr>
		<tr id="tab" bgcolor="" id="texte" style="color: red">  
		  <td colspan="2">Titre&nbsp;</td>
		</tr>
		<tr id="tab" bgcolor="" id="texte" style="color: red">
		  <td colspan="2">Première ligne&nbsp;</td>
		</tr>
		<tr id="tab" bgcolor="" id="texte" style="color: red">
		  <td colspan="2">Deuxième ligne&nbsp;</td>
		</tr>
	</table>
	<input type="hidden" name="fond1" value="">
	<input type="hidden" name="text1" value="">
	<input type="submit" value="Submit" />
</form>
</body>
</html>

Merci de votre aide.
Cordialement.

SpaceFrog · 19/09/2011, 14h05

tes options n'ont pas de value ?

Eric2a · 19/09/2011, 16h49

Salut,

Et sans compter que plusieurs élements HTML ont le même identifiant.

Il faut un élément parent portant l'unique identifiant. Il peut s'agir ici de :

<table id="tab" width="200" border="2">

ou bien de

<tbody id="tab">

Dans l'exemple ci-dessous la couleur des listes de choix n'est pas modifiée pour se rendre compte de l'utilité de la balise <tbody>.

Code xhtml :

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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
		.white {color:white}
		.black {color:black}
		.red {color:red}
		.green {color:green}
		.blue {color:blue}
		.yellow {color:yellow}
		.cyan {color:cyan}
		.chocolate {color:chocolate}
		.tomato {color:tomato}
	</style>
	<script type="text/javascript">
		function choisirFond(choix){
			var color=choix.value;
			if(color=='')color="white";
			document.getElementById("tab").style.backgroundColor=color;
			document.getElementById("fond1").value=color;
			//alert(document.form.fond1.value);
		}
		function choisirTexte(choix){
			var color=choix.value;
			if(color=='')color="black";
			document.getElementById("tab").style.color=color;
			document.getElementById("text1").value=color;
			//alert(document.form.text1.value);
		}
 
		function soumis(){
			var
				f=document.getElementById('select_fond'),
				t=document.getElementById("select_texte");
 
			alert(
				'Soumis :\n\n' +
				'  Fond : Value=' + f.value + ' ; Couleur = ' + f.options[f.selectedIndex].text + '\n\n' +
				'Couleur: Value=' + t.value + ' ; Couleur = ' + t.options[t.selectedIndex].text
			);
		}
	</script>
 
</head>
<body>
	<form action="recup.php" method="post" name="form" onsubmit="soumis();">
		<table width="200" border="2">
			<tbody>
				<tr>
					<td>Fond</td>
					<td>
						<select id="select_fond" name="select_fond" onchange="choisirFond(this);">
							<option value="" class="white" selected="selected">Choisir une couleur...</option>
							<option value="blue" class="blue">Bleu</option>
							<option value="chocolate" class="chocolate">Chocolat</option>
							<option value="red" class="red">Rouge</option>
							<option value="yellow" class="yellow">Jaune</option>
							<option value="green" class="green">Vert</option>
							<option value="cyan" class="cyan">Cyan</option>
							<option value="tomato" class="tomato">Tomato</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Texte</td>
					<td>
						<select id="select_texte" name="select_texte" onchange="choisirTexte(this);">
							<option value="" class="back" selected="selected">Choisir une couleur...</option>
							<option value="blue" class="blue">Bleu</option>
							<option value="chocolate" class="chocolate">Chocolat</option>
							<option value="red" class="red">Rouge</option>
							<option value="yellow" class="yellow">Jaune</option>
							<option value="green" class="green">Vert</option>
							<option value="cyan" class="cyan">Cyan</option>
							<option value="tomato" class="tomato">Tomato</option>
						</select>
					</td>
				</tr>
			</tbody>
			<tbody id="tab">
				<tr>
					<td colspan="2">Titre</td>
				</tr>
				<tr>
					<td colspan="2">Première ligne</td>
				</tr>
				<tr>
					<td colspan="2">Deuxième ligne</td>
				</tr>
			</tbody>
		</table>
		<div>
			<input type="hidden" name="fond1" id="fond1" value="" />
			<input type="hidden" name="text1" id="text1" value="" />
			<input type="submit" value="Envoyer" />
		</div>
	</form>
</body>
</html>

avalokitech · 19/09/2011, 18h40

Merci a SpaceFrog: c'est exact, mais cela fonctionne sans ...
Merci à Eric2a, avec ta rapide correction ça marche Nickel-Chrome.
Pour ceux que cela intéresse, je joins la modification qui tourne chez moi:

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
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
		.white {color:white}
		.black {color:black}
		.red {color:red}
		.green {color:green}
		.blue {color:blue}
		.yellow {color:yellow}
		.cyan {color:cyan}
		.chocolate {color:chocolate}
		.tomato {color:tomato}
	</style>
	<script type="text/javascript">
		function choisirFond(choix){
			var color=choix.value;
			if(color=='')color="white";
			document.getElementById("tab").style.backgroundColor=color;
			document.getElementById("fond1").value=color;
			alert(document.form.fond1.value);
		}
		function choisirTexte(choix){
			var color=choix.value;
			if(color=='')color="black";
			document.getElementById("tab").style.color=color;
			document.getElementById("text1").value=color;
			alert(document.form.text1.value);
		}
 
		function soumis(){
			var
				f=document.getElementById('select_fond'),
				t=document.getElementById("select_texte");
 
			alert(
				'Soumis :\n\n' +
				'  Fond : Value=' + f.value + ' ; Couleur = ' + f.options[f.selectedIndex].text + '\n\n' +
				'Couleur: Value=' + t.value + ' ; Couleur = ' + t.options[t.selectedIndex].text
			);
		}
	</script>
 
</head>
<body>
	<form action="result.php" method="post" name="form" onsubmit="soumis();">
		<table id="tab" width="200" border="2">
			<tbody>		
				<tr>
					<td>Fond</td>
					<td>
						<select id="select_fond" name="select_fond" onchange="choisirFond(this);">
							<option value="" class="back" selected="selected">Choisir une couleur...</option>
							<option value="blue" class="blue">Bleu</option>
							<option value="chocolate" class="chocolate">Chocolat</option>
							<option value="red" class="red">Rouge</option>
							<option value="yellow" class="yellow">Jaune</option>
							<option value="green" class="green">Vert</option>
							<option value="cyan" class="cyan">Cyan</option>
							<option value="tomato" class="tomato">Tomato</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Texte</td>
					<td>
						<select id="select_texte" name="select_texte" onchange="choisirTexte(this);">
							<option value="" class="back" selected="selected">Choisir une couleur...</option>
							<option value="blue" class="blue">Bleu</option>
							<option value="chocolate" class="chocolate">Chocolat</option>
							<option value="red" class="red">Rouge</option>
							<option value="yellow" class="yellow">Jaune</option>
							<option value="green" class="green">Vert</option>
							<option value="cyan" class="cyan">Cyan</option>
							<option value="tomato" class="tomato">Tomato</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2">Titre</td>
				</tr>
				<tr>
					<td colspan="2">Premi&egrave;re ligne</td>
				</tr>
				<tr>
					<td colspan="2">Deuxi&egrave;me ligne</td>
				</tr>
			</tbody>
		</table>
		<div>
			<input type="hidden" name="fond1" id="fond1" value="" />
			<input type="hidden" name="text1" id="text1" value="" />
			<input type="submit" value="Envoyer" />
		</div>
	</form>
</body>
</html>

19/09/2011, 14h05	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	tes options n'ont pas de value ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email