changer border de <td>

**Emcy** · 08/11/2007, 10h00

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 :

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

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 ?

**SpaceFrog** · 08/11/2007, 10h09

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

Code :

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

.borderBlue {border: solid 1px blue;}

**Emcy** · 08/11/2007, 10h31

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 :

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

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

**Emcy** · 08/11/2007, 11h26

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 :

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

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 :

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

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 :

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

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 :

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

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

**le_chomeur** · 08/11/2007, 12h04

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

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

**Emcy** · 08/11/2007, 13h13

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 :

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

**le_chomeur** · 08/11/2007, 13h30

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

Code :

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

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 :

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

**Emcy** · 08/11/2007, 14h03

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 :

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

**le_chomeur** · 08/11/2007, 15h57

ici le cas est différent car tu utilises des classes globales :

Code :

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

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

**Emcy** · 08/11/2007, 16h22

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

Code :

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

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

en

Code :

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

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

=> pourtant ça ne marchait pas

... ou est l'erreur ?

**SpaceFrog** · 08/11/2007, 16h28

oui mais si tu vires le calssName et qu'il y a une classe par defaut qui s'applique à la balise ...

**Emcy** · 08/11/2007, 17h10

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

**le_chomeur** · 08/11/2007, 18h01

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 :

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

**Emcy** · 09/11/2007, 08h52

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

voici mon css de l'exemple #6

j'ai bien une classe par defaut :

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

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

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

**Emcy** · 09/11/2007, 09h00

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

...

merci pour vos aides...

changer border de <td>

JavaScript

Discussions similaires

Partager

Partager