surligner colonne et ligne d'un tableau

**top_nullus** · 07/08/2012, 18h16

Bonjour,

J'ai un grand tableau carré, avec en ligne0 le titre des colonnes et colonne0 le titre des lignes, au milieu les valeurs.
Le bgcolor des titres est en gris, celui des cases faisant une diagonale d'en haut à gauche à en bas à droite est jaune, celui des cases sous cette séparation est bleu, celui des cases au dessus de cette séparation est vert.

Je voudrais qu'au survol de la souris d'une case, la ligne et la colonne de cette case soient en surbrillance rouge, que les titres en gris et la diagonale en jaune ne changent pas.

A la construction, chaque <td> a un id (td_col_lig) et a un style définissant sa couleur de fond.
.hautdesu { background-color: lightblue; }
.endessou { background-color: lightgreen; }
.endiagon { background-color: lightyellow; }

Dans chaque <td> il y a un <div> avec un id (div_col_lig) et un style
.hovernon { background-color: transparent ; }
et la boucle javascript change sont style en
.hoveroui { background-color: lightred; }

Chaque <div> a un mouseover change(col,lig,style) et un mouseout change(col,lig,style)

Pour l'instant, j'ai une fonction javascript qui fait une boucle sur la ligne et la colonne pour changer la class des cases concernées

Mon soucis c'est que, quand il y a un retour à la ligne dans une case, ce n'est pas toute la case qui change de couleur mais juste le texte.
Un autre ennui, c'est que vu la grande taille de mon tableau, le changement de couleur case après case est visible.

Ci dessous ma page HTML fonctionnelle, raccourcie et simplifiée (vous pouvez faire un copier/coller pour tester) :

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
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
<html>
<head>
<STYLE type='text/css'>
.pourtitr { background-color: lightgrey; }
.hautdesu { background-color: lightblue; }
.endessou { background-color: lightgreen; }
.endiagon { background-color: lightyellow; }
.hovernon { background-color: transparent ; }
.hoveroui { background-color: red; }
td { text-align: center;}
</style>
 
<script type="text/javascript">
 
function change(lign,colo,modif)
{	var btn ="";
	var MonTab = new Array('trf','bvc','ojn','cxk','jgb');
	for(var i=0; i<MonTab.length; i++)
	{	btn = MonTab[i];
		if(btn != lign && btn != colo) // ne pas modifier la diagonale
		{	document.getElementById("div_"+lign+"_"+btn).className= modif;
			document.getElementById("div_"+btn+"_"+colo).className= modif;
}	}	}
 
</script>
 
</head>
<body>
 
<table border = 1>
	<tr>
		<td id = "td__titre___titre_" class = "pourtitr" >
			<div id = "div__titre___titre_" class="hovernon" 
			>_titre___titre_
			</div>
		</td>
		<td id = "td__titre__trf" class = "pourtitr" >
			<div id = "div__titre__trf" class="hovernon" 
			>_titre__trf
			</div>
		</td>
		<td id = "td__titre__bvc" class = "pourtitr" >
			<div id = "div__titre__bvc" class="hovernon" 
			>_titre__bvc
			</div>
		</td>
		<td id = "td__titre__ojn" class = "pourtitr" >
			<div id = "div__titre__ojn" class="hovernon" 
			>_titre__ojn
			</div>
		</td>
		<td id = "td__titre__cxk" class = "pourtitr" >
			<div id = "div__titre__cxk" class="hovernon" 
			>_titre__cxk
			</div>
		</td>
		<td id = "td__titre__jgb" class = "pourtitr" >
			<div id = "div__titre__jgb" class="hovernon" 
			>_titre__jgb
			</div>
		</td>
	</tr>
	<tr>
		<td id = "td_trf__titre_" class = "pourtitr" >
			<div id = "div_trf__titre_" class="hovernon" 
			>trf__titre_
			</div>
		</td>
		<td id = "td_trf_trf" class = "endiagon" >
			<div id = "div_trf_trf" class="hovernon" 
			 onMouseOver="change('trf','trf','hoveroui');" onMouseOut="change('trf','trf','hovernon');" >trf_trf
			</div>
		</td>
		<td id = "td_trf_bvc" class = "endessou" >
			<div id = "div_trf_bvc" class="hovernon" 
			 onMouseOver="change('trf','bvc','hoveroui');" onMouseOut="change('trf','bvc','hovernon');" >trf_bvc
			</div>
		</td>
		<td id = "td_trf_ojn" class = "endessou" >
			<div id = "div_trf_ojn" class="hovernon" 
			 onMouseOver="change('trf','ojn','hoveroui');" onMouseOut="change('trf','ojn','hovernon');" >trf_ojn
			</div>
		</td>
		<td id = "td_trf_cxk" class = "endessou" >
			<div id = "div_trf_cxk" class="hovernon" 
			 onMouseOver="change('trf','cxk','hoveroui');" onMouseOut="change('trf','cxk','hovernon');" >trf_cxk
			</div>
		</td>
		<td id = "td_trf_jgb" class = "endessou" >
			<div id = "div_trf_jgb" class="hovernon" 
			 onMouseOver="change('trf','jgb','hoveroui');" onMouseOut="change('trf','jgb','hovernon');" >trf_jgb
			</div>
		</td>
	</tr>
	<tr>
		<td id = "td_bvc__titre_" class = "pourtitr" >
			<div id = "div_bvc__titre_" class="hovernon" 
			>bvc__titre_
			</div>
		</td>
		<td id = "td_bvc_trf" class = "hautdesu" >
			<div id = "div_bvc_trf" class="hovernon" 
			 onMouseOver="change('bvc','trf','hoveroui');" onMouseOut="change('bvc','trf','hovernon');" >bvc_trf
			</div>
		</td>
		<td id = "td_bvc_bvc" class = "endiagon" >
			<div id = "div_bvc_bvc" class="hovernon" 
			 onMouseOver="change('bvc','bvc','hoveroui');" onMouseOut="change('bvc','bvc','hovernon');" >bvc_bvc
			</div>
		</td>
		<td id = "td_bvc_ojn" class = "endessou" >
			<div id = "div_bvc_ojn" class="hovernon" 
			 onMouseOver="change('bvc','ojn','hoveroui');" onMouseOut="change('bvc','ojn','hovernon');" >bvc_ojn
			</div>
		</td>
		<td id = "td_bvc_cxk" class = "endessou" >
			<div id = "div_bvc_cxk" class="hovernon" 
			 onMouseOver="change('bvc','cxk','hoveroui');" onMouseOut="change('bvc','cxk','hovernon');" >bvc_cxk
			</div>
		</td>
		<td id = "td_bvc_jgb" class = "endessou" >
			<div id = "div_bvc_jgb" class="hovernon" 
			 onMouseOver="change('bvc','jgb','hoveroui');" onMouseOut="change('bvc','jgb','hovernon');" >bvc_jgb
			</div>
		</td>
	</tr>
	<tr>
		<td id = "td_ojn__titre_" class = "pourtitr" >
			<div id = "div_ojn__titre_" class="hovernon" 
			>ojn__titre_
			</div>
		</td>
		<td id = "td_ojn_trf" class = "hautdesu" >
			<div id = "div_ojn_trf" class="hovernon" 
			 onMouseOver="change('ojn','trf','hoveroui');" onMouseOut="change('ojn','trf','hovernon');" >ojn_trf
			</div>
		</td>
		<td id = "td_ojn_bvc" class = "hautdesu" >
			<div id = "div_ojn_bvc" class="hovernon" 
			 onMouseOver="change('ojn','bvc','hoveroui');" onMouseOut="change('ojn','bvc','hovernon');" >ojn_bvc
			</div>
		</td>
		<td id = "td_ojn_ojn" class = "endiagon" >
			<div id = "div_ojn_ojn" class="hovernon" 
			 onMouseOver="change('ojn','ojn','hoveroui');" onMouseOut="change('ojn','ojn','hovernon');" >ojn_ojn
			</div>
		</td>
		<td id = "td_ojn_cxk" class = "endessou" >
			<div id = "div_ojn_cxk" class="hovernon" 
			 onMouseOver="change('ojn','cxk','hoveroui');" onMouseOut="change('ojn','cxk','hovernon');" >ojn_cxk
			</div>
		</td>
		<td id = "td_ojn_jgb" class = "endessou" >
			<div id = "div_ojn_jgb" class="hovernon" 
			 onMouseOver="change('ojn','jgb','hoveroui');" onMouseOut="change('ojn','jgb','hovernon');" >ojn_jgb
			</div>
		</td>
	</tr>
	<tr>
		<td id = "td_cxk__titre_" class = "pourtitr" >
			<div id = "div_cxk__titre_" class="hovernon" 
			>cxk__titre_
			</div>
		</td>
		<td id = "td_cxk_trf" class = "hautdesu" >
			<div id = "div_cxk_trf" class="hovernon" 
			 onMouseOver="change('cxk','trf','hoveroui');" onMouseOut="change('cxk','trf','hovernon');" >cxk_trf
			</div>
		</td>
		<td id = "td_cxk_bvc" class = "hautdesu" >
			<div id = "div_cxk_bvc" class="hovernon" 
			 onMouseOver="change('cxk','bvc','hoveroui');" onMouseOut="change('cxk','bvc','hovernon');" >cxk_bvc
			</div>
		</td>
		<td id = "td_cxk_ojn" class = "hautdesu" >
			<div id = "div_cxk_ojn" class="hovernon" 
			 onMouseOver="change('cxk','ojn','hoveroui');" onMouseOut="change('cxk','ojn','hovernon');" >cxk_ojn
			</div>
		</td>
		<td id = "td_cxk_cxk" class = "endiagon" >
			<div id = "div_cxk_cxk" class="hovernon" 
			 onMouseOver="change('cxk','cxk','hoveroui');" onMouseOut="change('cxk','cxk','hovernon');" >cxk_cxk
			</div>
		</td>
		<td id = "td_cxk_jgb" class = "endessou" >
			<div id = "div_cxk_jgb" class="hovernon" 
			 onMouseOver="change('cxk','jgb','hoveroui');" onMouseOut="change('cxk','jgb','hovernon');" >cxk_jgb
			</div>
		</td>
	</tr>
	<tr>
		<td id = "td_jgb__titre_" class = "pourtitr" >
			<div id = "div_jgb__titre_" class="hovernon" 
			>jgb__titre_
			</div>
		</td>
		<td id = "td_jgb_trf" class = "hautdesu" >
			<div id = "div_jgb_trf" class="hovernon" 
			onMouseOver="change('jgb','trf','hoveroui');" 
			onMouseOut="change('jgb','trf','hovernon');" 
			>jgb_trf
			</div>
		</td>
		<td id = "td_jgb_bvc" class = "hautdesu" >
			<div id = "div_jgb_bvc" class="hovernon" 
			 onMouseOver="change('jgb','bvc','hoveroui');" onMouseOut="change('jgb','bvc','hovernon');" >jgb_bvc
			</div>
		</td>
		<td id = "td_jgb_ojn" class = "hautdesu" >
			<div id = "div_jgb_ojn" class="hovernon" 
			 onMouseOver="change('jgb','ojn','hoveroui');" onMouseOut="change('jgb','ojn','hovernon');" >jgb_ojn
			</div>
		</td>
		<td id = "td_jgb_cxk" class = "hautdesu" >
			<div id = "div_jgb_cxk" class="hovernon" 
			 onMouseOver="change('jgb','cxk','hoveroui');" onMouseOut="change('jgb','cxk','hovernon');" >jgb_cxk
			</div>
		</td>
		<td id = "td_jgb_jgb" class = "endiagon" >
			<div id = "div_jgb_jgb" class="hovernon" 
			 onMouseOver="change('jgb','jgb','hoveroui');" onMouseOut="change('jgb','jgb','hovernon');" >jgb_jgb
			</div>
		</td>
	</tr>
</table>
</html>

Avant il n'y avait pas de DIV dans le TD, je devais tester la position du TD par rapport à la diagonale pour savoir quelle class lui affecter et c'était plus long pour l'affichage.

Ma première question :
Auriez vous un traitement plus rapide à me proposer ?

Ma seconde question :
Existe t il une solution en CSS et comment faire ?

Par avance merci

**headmax** · 07/08/2012, 18h44

En css oui :

Code :

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

1
2
3
4
5
6
 
td[class=titre]:hover{
 cursor:pointer;
 background:red;
 //ton style au survol de tes td dont la class est égal a titre...
}

**top_nullus** · 07/08/2012, 18h58

Je ne comprends pas bien comment ça peut fonctionner pour ne surligner que la colonne ET la ligne de la case survolée ...
A moins qu'il soit possible de définir plusieurs titres ou un titre composé pour une class ?

**headmax** · 07/08/2012, 21h25

Rien ne t'empêche de créer une regexp plus précise comme applique le style sur tout les td dont l'id début par 'td_'.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style type="text/css">
td[id^='td_']:hover{
 cursor:pointer;
 background:red;
 //ton style au survol de tes td dont la class est égal a titre...
}
//sur la ligne tr et le td
tr td[id^='td_']:hover{
 cursor:pointer;
 background:red;
 //ton style au survol de tes td dont la class est égal a titre...
}
</style>

**top_nullus** · 08/08/2012, 07h26

créer une regexp ? c'est à dire ?
est ce une règle d'expression ?
est ce ceci : http://fr.wikipedia.org/wiki/Expression_rationnelle ?

Ne connaissant pas regexp, je ne sais comment ça peu fonctionner.
Quelqu'un aurait-il un tuto en français avec des exemples ?

**top_nullus** · 08/08/2012, 10h13

En attendant de comprendre comment fonctionne regexp avec CSS, j'ai découvert <colgroup> et <col /> et si j'ai bien compris, il va me falloir déclarer autant de style:hover que j'aurai de colonne ?

surligner colonne et ligne d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager