Tableau dynamique+Récupérer id de toutes les lignes

Bonjour à tous,

Je vous expliques mon soucis, j'ai un tableau auquel j'ai désiré attribuer différents styles sur le onMouseOver, le onMouseOut et le onClick. Donc tout fonctionne quasiment sauf que lors du onClick, la class se modifie lorsque je fais un onMouseOut (logique sa passe avant...).

Donc je suis partis sur la piste de faire mon tableau et d'attribuer des id à mes tr. Le seul "soucis" c'est que les id de mes tr sont constitué comme suit :
Code:

1 2 <tr style="height:25px;" id="tr_+VariableAvecDesHeures" class="ui-state-default" onMouseOver="document.getElementById(this.id).className='ui-state-hover';" onMouseOut="document.getElementById(this.id).className='ui-state-default';" onClick="document.getElementById(this.id).className='ui-state-active';">
Donc vous inquiétez pas, je vais coder proprement et faire de jolies fonction après :P

Enfin bref, mon seul soucis c'est que lors du onClick je me dois de faire une boucle sur les id de mes tr pour leurs enlever la class... Et comme l'id de mes <tr> sont constitué d'heures... cela pause un petit soucis dans ma petite tête ^^

Y'a-t'il un moyen plus simple ?

Merci d'avance

Code:

id="tr_"+VariableAvecDesHeures+"

8O

tu ne peux pas inserer de js comme ça dans le html ...

il te faut passer par une fonction

Je le sais bien ^^ J'ai "décodé" si on veut :-P

Le tableau fonctionne donc je penses bien ne pas avoir fait comme ca hehehe

le vrai code ressemble à ça sous 4d :

Code:

1
2
3
4
5
6
7
8
 
 
Tant que ($var_HeureDepart<=$var_HeureFinal)
$var_donneeWeb:=$var_donneeWeb+"<tr style=\"height:25px;\" id=\"tr_"+Chaine($var_HeureDepart;h mn)+"\" "
$var_donneeWeb:=$var_donneeWeb+"class=\"ui-state-default\" onMouseOver=\"document.getElementById(this.id).className='ui-state-hover';\" "
$var_donneeWeb:=$var_donneeWeb+"onMouseOut=\"document.getElementById(this.id).className='ui-state-default';\" "
$var_donneeWeb:=$var_donneeWeb+"onClick=\"document.getElementById(this.id).className='ui-state-active';\">\n"
$var_donneeWeb:=$var_donneeWeb+"<td>"+Chaine($var_HeureDepart;h mn)+"</td>\n"

En gros 4D fait fonctionner tout seul comme un grand le js et l'html ^^

le code html généré nous serait plus utile ...

Si tu y tient ^^ ca va être un peu long et répétitif ^^

Voilà tout :

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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
 
<table id="TableauPlusieursSalles" class="ui-widget ui-widget-content" border="0">
<thead class="ui-widget-header" style="height: 40px;">
<tr>
<th>&nbsp;</th>
<th>SALLE TEST</th>
</tr>
</thead>
<tbody>
<tr style="height: 25px;" id="tr_00:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>00:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_00:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>00:15</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_00:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>00:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_00:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>00:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_01:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>01:00</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_01:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>01:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_01:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>01:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_01:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>01:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_02:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>02:00</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_02:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>02:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_02:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>02:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_02:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>02:45</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_03:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>03:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_03:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>03:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_03:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>03:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_03:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>03:45</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_04:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>04:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_04:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>04:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_04:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>04:30</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_04:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>04:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_05:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>05:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_05:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>05:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_05:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>05:30</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_05:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>05:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_06:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>06:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_06:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>06:15</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_06:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>06:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_06:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>06:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_07:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>07:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_07:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>07:15</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_07:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>07:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_07:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>07:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_08:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>08:00</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_08:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>08:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_08:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>08:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_08:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>08:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_09:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>09:00</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_09:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>09:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_09:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>09:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_09:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>09:45</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_10:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>10:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_10:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>10:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_10:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>10:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_10:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>10:45</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_11:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>11:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_11:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>11:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_11:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>11:30</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_11:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>11:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_12:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>12:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_12:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>12:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_12:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>12:30</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_12:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>12:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_13:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>13:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_13:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>13:15</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_13:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>13:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_13:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>13:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_14:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>14:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_14:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>14:15</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_14:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>14:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_14:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>14:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_15:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>15:00</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_15:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>15:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_15:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>15:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_15:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>15:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_16:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>16:00</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_16:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>16:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_16:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>16:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_16:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>16:45</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_17:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>17:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_17:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>17:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_17:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>17:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_17:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>17:45</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_18:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>18:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_18:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>18:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_18:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>18:30</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_18:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>18:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_19:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>19:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_19:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>19:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_19:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>19:30</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_19:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>19:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_20:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>20:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_20:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>20:15</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_20:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>20:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_20:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>20:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_21:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>21:00</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_21:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>21:15</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_21:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>21:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_21:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>21:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_22:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>22:00</td>
<td>Libre</td>
 
</tr><tr style="height: 25px;" id="tr_22:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>22:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_22:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>22:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_22:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>22:45</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_23:00" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>23:00</td>
 
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_23:15" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>23:15</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_23:30" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>23:30</td>
<td>Libre</td>
</tr><tr style="height: 25px;" id="tr_23:45" class="ui-state-default" onmouseover="document.getElementById(this.id).className='ui-state-hover';" onmouseout="document.getElementById(this.id).className='ui-state-default';" onclick="document.getElementById(this.id).className='ui-state-active';">
<td>23:45</td>
<td>Libre</td>
 
</tr></tbody>
</table>

Code:

onmouseover="document.getElementById(this.id).className='ui-state-hover';"

quel intéréet ???8O

Code:

onmouseover="this.className='ui-state-hover';"

Ha vi, c'est juste :aie:

Faut juste que je trouve le moyen de faire un boucle pour désactivé la class "clické" de toutes les autres lignes et désactiver le onMouseOut sur la ligne précise.

En gros je veux juste faire un tableau qui quand on click sur une ligne sa reste en surbrillance et les autres lignes ont la class onMouseOut et Over.

Bon vais me simplifier la tâche je penses,

vais mettre un id avec un nombre directement au lieu de passer avec des heures.

Je tient au courant le forum pour la solution ^^ si je trouve :P

sur le click attribue un flag booléan à this ...

Code:

onclick="this.clicked=true"

puis sur le mouseover et out teste le this.clicked

Haaaaaa pas bête du tout ça,

Je test de suite, merci

[EDIT]

Merci pour ton code la grenouille folle :-P sa fonctionne pour le onclick afin de désactiver le onMouseOver et Out.

Faudrait juste maintenant que je boucle pour que lorsque je click sur un <tr> je désactive les <tr> sur lesquels ont a déjà cliqué ^^

sinon lors du click tu attribues un className et tu testes sur le className ...

un click sur une autre ligne reinitialisant le className

Heu pas compris la...

En gros je clique sur un <tr> et je change mon className. Ensuite je test si ce dernier est sous cliqué, survolé ou out. Jusque la je vois ^^

Mais pas compris comment tester les autres <tr> si un <tr> a déjà été cliqué :?