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 ?

changer border de <td>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager