Question dans un tableau

Version imprimable

17/06/2013, 18h43
DC1977

Question dans un tableau

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

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:

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:

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:

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');
});

17/06/2013, 19h30
DC1977

Cool ! Merci beaucoup ! :)