changer border de <td>

Version imprimable

bonjour,

Je voudrais changer la propriété border de toutes les balises <td> qu'il y a dans la <div id="toto">

actuellement, je fais comme ceci :
Code:

1 2 3 4 5 6 7 function changeBorder() { mes_elements = document.getElementById('toto').getElementsByTagName('td'); for(var i = 0; i <= mes_elements.length-1; i++){ mes_elements[i].style.border='1px solid blue'; }; }
=> n'existe t-il pas une meilleure methode que d'utiliser cette boucle for ?

08/11/2007, 10h09
SpaceFrog

non il faut bien scanner les tds ...
parcontre il serait préférable de passer par un className ...

Code:

.borderBlue {border: solid 1px blue;}
08/11/2007, 10h31
Emcy

OK merci pour ton aide

j'ai une autre question : si une balise à une class de définie, comment fait-on pour supprimer cette classe ?

j'ai essayé ça mais ça ne marche pas :

Code:

document.getElementById('toto').className = '';

A priori, la commande que j'ai cité precedemment detruit bien la classe mais le rafraichissement de la page ne se fait pas

ce que je voulais faire, c'est changer la couleur des tableaux qui se trouvent dans un div (id="toto") en fonction de la valeur d'un checkbox

voici ce que j'ai fait

dans mon fichier css, je défini les attributs standard de mes tableaux
Code:

1 2 3 4 5 6 7 8 9 10 11 table{ ... } td{ ... } tr{ ... }
dans mon fichier css, j'ai créer une classe pour changer la couleur de mes tableaux
Code:

1 2 3 4 5 6 7 8 9 10 11 12 div.couleur2 table{ ... } div.couleur2 td{ ... } div.couleur2 tr{ ... }
et donc mon code javascript est :
Code:

1 2 3 4 5 6 7 8 9 function changeColor(myCheckBox) { if (myCheckBox.checked == true){ document.getElementById('toto').className = ''; } else { document.getElementById('toto').className = 'couleur2'; } }
=> lorsque ma checkbox est true, le chagement d'apparence ne se fait pas

par contre si je créer une seconde classe 'couleur1" et que j'utilise ce script :
Code:

1 2 3 4 5 6 7 8 9 function changeColor(myCheckBox) { if (myCheckBox.checked == true){ document.getElementById('toto').className = 'couleur1'; } else { document.getElementById('toto').className = 'couleur2'; } }
=> alors ça fonctionne

Le probleme avec cette deuxieme methode est qu'il faut créer une deuxieme classe (ce qui fait que dans mon css, j'ai trois présentation de définies pour mon tableau : couleur1, couleur2 et la standard => sachant que standard et couleur1 sont identiques): n'y a t-il pas un moyen de pallier à ce problème (je trouve cette methode pas très élégante...)?

Etrange , j'ai testé comme ceci : et cela fonctionne parfaitement :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
.couleur2{
	background-color:yellow;
	font-size:30px;
}
 
</style>
<script type="text/javascript">
function changeColor(valeur)
{
	if (valeur == true){
		document.getElementById('toto').className = '';
	} else {
		document.getElementById('toto').className = 'couleur2';	
	}
 
}
</script>
 
</head>
 
<body>
<div id="toto">test</div>
<input type="button" value="jaune" onclick="changeColor(false)" />
<input type="button" value="rien" onclick="changeColor(true)" />
</body>
</html>

Ton exemple marche chez moi mais je n'utilise pas exactement la même methode (je change la classe du div qui contient les elements à modifier et non pas la classe des elements eux-même)
=> cela permet de pouvoir créer plusieurs zones differentes sur ma page assez rapidement avec un minimum de code...

voici un exemple :

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!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="en" >
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<style type="text/css">
 
/* ******** valeur par défaut ******** */		
table
{
	margin: 10px auto;
	padding: 0;
	font-size: 0.9em;
	border-collapse: collapse;
	border: 2px solid rgb(0,3,158);
	color: rgb(0,3,158);
	font-size: 0.85em
}
 
th
{
	font-weight: bold;
	background-color: rgb(0,3,158);
	color: white;
	font-weight: bold
}
 
th, td
{
	border: 1px solid rgb(0,3,158);
	text-align: center;
	padding: 0.2em 1em;
	margin: 0
}
 
 
/* ******** couleur1 ******** */
div.couleur1 table{
	border: 2px solid rgb(192,192,192);
	color: rgb(192,192,192);
}
 
div.couleur1 th{
	background-color: rgb(192,192,192);
	border: 1px solid rgb(192,192,192);
}
 
div.couleur1 td{
	border: 1px solid rgb(192,192,192);
}
 
/* ******** couleur2 ******** */
 
div.couleur2 table{
	border: 2px solid rgb(0,3,158);
	color: rgb(0,3,158);
}
 
div.couleur2 th{
	background-color: rgb(0,3,158);
	border: 1px solid rgb(0,3,158);
}
 
div.couleur2 td{
	border: 1px solid rgb(0,3,158);
}
 
		</style>
 
		<script type="text/javascript">
		// <![CDATA[
 
function DisableElement(Nom, valeur)
{
	if (valeur == true){
		//document.getElementById(Nom).className = '';
		document.getElementById(Nom).className = 'couleur1';
	} else {
		document.getElementById(Nom).className = 'couleur2';	
	}
 
	var myElts = document.getElementById(Nom).getElementsByTagName('input');
	for(var i = 0; i <= myElts.length-1; i++){
			myElts[i].disabled = valeur
	}
}
 
function DisZone(maCheckBox)
{
	var maValeur = maCheckBox.checked;
	DisableElement('z_' + maCheckBox.id, (maValeur?0:1));
}
 
		// ]]>
		</script>
	</head>
 
	<body>
		<p><label><input type="checkbox" id="CheckCouleur1" onclick="DisZone(this)"/> Activer Zone 1</label></p>
 
		<div id="z_CheckCouleur1">
			<table>
				<thead>
					<tr>
						<th colspan="7">MON TITRE</th>
					</tr>
 
					<tr>
						<th>1</th>
						<th>2</th>
						<th>3</th>
						<th>4</th>
						<th>5</th>
						<th>6</th>
						<th>7</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
						<td><input type="checkbox" id="D_MEMB0" /></td>
						<td><input type="checkbox" id="D_MEMB1" /></td>
						<td><input type="checkbox" id="D_MEMB2" /></td>
						<td><input type="checkbox" id="D_MEMB3" /></td>
						<td><input type="checkbox" id="D_MEMB4" /></td>
						<td><input type="checkbox" id="D_MEMB5" /></td>
						<td>aaa</td>
					</tr>
 
					<tr>
						<td><input type="checkbox" id="D_TAG0" /></td>
						<td><input type="checkbox" id="D_TAG1" /></td>
						<td><input type="checkbox" id="D_TAG2" /></td>
						<td><input type="checkbox" id="D_TAG3" /></td>
						<td><input type="checkbox" id="D_TAG4" /></td>
						<td><input type="checkbox" id="D_TAG5" /></td>
						<td>bbb</td>
					</tr>
				</tbody>
			</table>
 
			<table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
 
				</tr>
 
				<tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
					<td>d</td>
				</tr>
			</table>
		</div>
 
		<p><label><input type="checkbox" id="CheckCouleur2" onclick="DisZone(this)"/> Activer Zone 2</label></p>
		<div id="z_CheckCouleur2">
			<table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
 
				</tr>
 
				<tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
					<td>d</td>
				</tr>
			</table>
		</div>
	</body>
</html>

=> ai-je fait une erreur a quelque part ?

Non , il n'y a pas d'erreur , mais je pense que c'est logique :
Code:

1 2 3 4 5 6 7 if (valeur == true){ //document.getElementById(Nom).className = ''; document.getElementById(Nom).className = 'couleur1'; } else { document.getElementById(Nom).className = 'couleur2'; }
si l'on affecte la classe grise pour désactiver , lors de la réactivation il faut réaffecter une classe car si l'on met :
document.getElementById(Nom).className = ''

la classe de base ( affecté par css ou par code ) est détruite donc l'état ne change pas ... en reprenant mon exemple et en affectant une classe de base tu comprendras mieux les 3 état :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css"> .couleurBase{ background-color:red; } .couleur2{ background-color:yellow; font-size:30px; } </style> <script type="text/javascript"> function changeColor(valeur) { if (valeur == true){ document.getElementById('toto').className = ''; } else { document.getElementById('toto').className = 'couleur2'; } } </script> </head> <body> <div id="toto" class="couleurBase">test</div> <input type="button" value="jaune" onclick="changeColor(false)" /> <input type="button" value="rien" onclick="changeColor(true)" /> </body> </html>
On voit bien la classe de base rouge,
en clickant sur jaune , la classe jaune,
et en clickant sur rien , aucune classe, la div reprend un formatage brut

En espérant t'avoir permis de comprendre ^^

Coordialement

je ne suis pas sure de tout comprendre

la je viens d'essayer de faire un exemple simplifié de ma methode est ça marche :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
 
p{
	background-color:red;
}
 
td{
	background-color:blue;
}
 
div.couleur2 p{
	background-color:yellow;
}
 
div.couleur2 td{
	background-color:yellow;
}
 
</style>
<script type="text/javascript">
function changeColor(valeur)
{
	if (valeur == true){
		document.getElementById('toto').className = '';
	} else {
		document.getElementById('toto').className = 'couleur2';	
	}
 
}
</script>
 
</head>
 
<body>
 
<div id="toto">
	<p>test</p>
 
	<table>
		<tr>
			<td>1</td>
		</tr>
	</table>
</div>
 
<input type="button" value="jaune" onclick="changeColor(false)" />
<input type="button" value="rien" onclick="changeColor(true)" />
</body>
</html>

=> lorque je supprime la classe, je reviens bien à la présentation de base : je ne vois que ce qui est different de ce que j'ai mis tout à l'heure ....

08/11/2007, 15h57
le_chomeur
ici le cas est différent car tu utilises des classes globales :
Code:

1 2 3 4 5 6 7 8 p{ background-color:red; } td{ background-color:blue; }
qui reprennent le relai une fois qu'il n'y a plus de classe assigné à ton élément :)

mais c'est ce que j'ai aussi fait dans mon post #6, si on modifie
Code:

1 2 3 //document.getElementById(Nom).className = ''; document.getElementById(Nom).className = 'couleur1';
en
Code:

1 2 3 document.getElementById(Nom).className = ''; //document.getElementById(Nom).className = 'couleur1';
=> pourtant ça ne marchait pas :marteau: ... ou est l'erreur ?

08/11/2007, 16h28
SpaceFrog

oui mais si tu vires le calssName et qu'il y a une classe par defaut qui s'applique à la balise ...
08/11/2007, 17h10
Emcy

Desolé, mais je n'ai pas trop compris ce que tu voulais dire SpaceFrog ....

serpent qui se mord la queue ^^

sur ton exemple #6

-- tu avais une classe de base
-- tu en remet une
-- tu la supprime

tu te retrouves sans aucune classe affecté SAUF si dans ton css tu as une classe par défaut sur tes éléments comme tu al fait dans ton second exemple :

p{
font-size:18px
/****/
}

ce genre de chose ...

je reprend mon exemple en ajoutant une classe globale au div :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css"> div{ background-color:green; } .couleurBase{ background-color:red; } .couleur2{ background-color:yellow; font-size:30px; } </style> <script type="text/javascript"> function changeColor(valeur) { if (valeur == true){ document.getElementById('toto').className = ''; } else { document.getElementById('toto').className = 'couleur2'; } } </script> </head> <body> <div id="toto" class="couleurBase">test</div> <input type="button" value="jaune" onclick="changeColor(false)" /> <input type="button" value="rien" onclick="changeColor(true)" /> </body> </html>
voila qui illustre tout le processus :)

classe de base : couleur rouge
classe affecté : couleur jaune
classe supprimé : la classe globale reprend le dessus : couleur verte

je ne comprends toujours po : pour moi les deux exemples se ressemblent :arf:

voici mon css de l'exemple #6

j'ai bien une classe par defaut :
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 /* ******** valeur par défaut ******** */ table { margin: 10px auto; padding: 0; font-size: 0.9em; border-collapse: collapse; border: 2px solid rgb(0,3,158); color: rgb(0,3,158); font-size: 0.85em } th { font-weight: bold; background-color: rgb(0,3,158); color: white; font-weight: bold } th, td { border: 1px solid rgb(0,3,158); text-align: center; padding: 0.2em 1em; margin: 0 }
et une autre classe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* ******** couleur2 ******** */ div.couleur2 table{ border: 2px solid rgb(0,3,158); color: rgb(0,3,158); } div.couleur2 th{ background-color: rgb(0,3,158); border: 1px solid rgb(0,3,158); } div.couleur2 td{ border: 1px solid rgb(0,3,158); }
à l'ouverture du fichier, la presentation du tabelau se fait suivant la classe par defaut => ça marche

Donc si j'affecte la classe couleur2 à mon div, la présentation du tableau doit changer => ça marche

Après si je supprime ma classe, alors le tableau devrait avoir la pésentation par defaut => ça ne marche pas

09/11/2007, 09h00
Emcy

c'est bon, je viens de trouver l'erreur (erreur d'inattention) => ma classe par defaut à les même attributs que ma classe couleur2 : donc forcement il n'y avait pas de changement d'apparance => en fait, dans ma classe pas defaut, il fallait que je reprenne les attribut de la classe couleur1 et non pas couleur2 :aie: ...

merci pour vos aides...