Discussion :

[DC1977]

Bonjour,

J'aimerais savoir si c'est possible en JavaScript de quand on met la souris sur une cellule d'un tableau, de changer la couleur de la cellule de la colonne et de la ligne à laquelle elle appartient ? Je ne sais pas si c'est super clair ^^

Explication !

imaginons j'ai un tableau comme ca :

+-------+-------+-------+-------+
|-------|---A---|----B---|---C---|
+-------+-------+-------+-------+
|---1---|--------|--hello-|-------|
+-------+-------+-------+-------+
|---2---|--------|------ |-------|
+-------+-------+-------+-------+

je met ma souris sur "hello" et je veux que "B" et "1" change de couleur.

Merci d'avance

[SylvainPV]

Bonjour,

Pour les lignes c'est facile en CSS, par contre pour les colonnes il faut un peu de Javascript. Je t'ai fait un exemple avec jQuery : http://codepen.io/anon/pen/dlIic

Code html :

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
<table>
  <tr>
    <th></th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>1</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Code css :

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
td, th {
   width:80px;
   height: 40px;
   border: 1px solid black;
   text-align: center;
}
 
td:hover {
  background: green;
}
 
th.hover, th:hover {
  background: orange;
}
 
tr:hover td:first-child {
  background: yellow;
}

Code js :

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

1
2
3
4
5
$("table td").hover(function(e){
  $(this).closest('table').find('th').eq($(this).index()).addClass('hover');
}, function(e){
 $(this).closest('table').find('th').eq($(this).index()).removeClass('hover');
});

[DC1977]

Cool ! Merci beaucoup !