changement couleur de fond et de texte

Version imprimable

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

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

19/09/2011, 15h05
SpaceFrog

tes options n'ont pas de value ?

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 :

ou bien de

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:

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>

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:

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>