Discussion :

[Invité]

Bonjour,

J'ai un petit soucis de couleur (en hover) sur mes tr avec avec rowspan.
Je pense que le plus simple c'est d'y voir en image ..

Quand je pose ma souris sur la deuxieme cellule ou sur première ligne j'ai ceci :


En revanche quand je me pose sur la 2eme ou 3eme ligne ma première colonne n'est pas "prise" :


Je voudrais aussi que quand je me positionne sur la première colonne cela "sélectionne" les 3 lignes

A chaque fois sur mes tr j'ai une classe en hover :

Code :

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

1
2
3
tr.boot:hover {
   background-color : #xxxxxx
}

Pouvez-vous me donner un coup de main ?

Merci

[rodolphebrd]

Bonjour,

Il faudrait poster votre code..
Attention votre exemple de code est confus et source d'incompréhension.

[Invité]

Voici mon code html

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
<tr class="boot">
	<td class="band" rowspan="3">Joe Letz</td>
	<td class="flag"><img src="images/flags/fr.gif" alt="pays"></td>
	<td class="date">2013.04.24</td>
	<td class="lieux"><a href="l_boot.php?q=Halle Tony Garnier" class="invisible">Halle Tony Garnier</a></td>
</tr>
<tr class="boot">
	<td class="flag"><img src="images/flags/rs.gif" alt="pays"></td>
	<td class="date">2013.04.28</td>
	<td class="lieux"><a href="l_boot.php?q=Kombank Aren" class="invisible">Kombank Aren</a></td>
</tr>
<tr class="boot">
	<td class="flag"><img src="images/flags/si.gif" alt="pays"></td>
	<td class="date">2013.04.30</td>
	<td class="lieux"><a href="l_boot.php?q=Stozice Arena" class="invisible">Stozice Arena</a> <span class="rare"><sup>new</sup></span></td>
</tr>

[rodolphebrd]

et le css...

[Invité]

Le css est dans mon premier poste.. j'ai uniquement cette ligne la.

Code :

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

1
2
3
tr.boot:hover {
   background-color : #xxxxxx
}

[rodolphebrd]

Ça parait difficile de cibler une ligne en excluant une cellule au survol.
Il est certain que le rowspan crée une petite pagaille.
A moins de ne cibler que les cellules une par une.

[Invité]

Effectivement
Ce que je voudrais c'est avoir une ligne entière à chaque fois, comme ce site qui y arrive..

http://www.rammsteinworld.com/live/dates

[rodolphebrd]

C'est géré par Javascript...

[Invité]

comment ?

[rodolphebrd]

Quand vous désactivez Javascript il n'y a plus de survol.

[Invité]

Oui, mais comment est ce que je peux faire la même chose ?

[rodolphebrd]

Comme ça:http://jsbin.com/uhaja4/2/edit

[Invité]

Merci,

Mais que j'ai 2, 10 ou 25 lignes, cela marche uniquement pour les 2 premières lignes

[rodolphebrd]

Avec ce script ça fonctionne quelque soit le nombre de ligne.

Code javascript :

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
$("td").hover(function() {
 
  $el = $(this);
 
  $el.parent().addClass("hover");
 
  if ($el.parent().has('td[rowspan]').length == 0)
 
  	$el
      .parent()
      .prevAll('tr:has(td[rowspan]):first')
      .find('td[rowspan]')
      .addClass("hover");
 
}, function() { 
 
  $el
    .parent()
    .removeClass("hover")
    .prevAll('tr:has(td[rowspan]):first')
    .find('td[rowspan]')
    .removeClass("hover");
 
});

Code css :

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

1
2
3
.hover {
	background: yellow;
}

[Invité]

Merci, ça fonctionne parfaitement.

[Invité]

Bonjour,

Je viens de remarquer un petit problème.
Ce code ne marche pas quand mon tableau est chargé via un code ajax.

Avez-vous une solution pour "appliquer" ce code au tableau chargé ?

Merci