Hover inopérant sur tbody tr

[arthuro45]

Bonsoir,

Après avoir retourné mon code dans tous les sens je me tourne vers vous.

Ce code ne lève aucune erreur mais ne remplit pas son office : surligner les tr d'un tableau html au passage du pointeur.
Le tableau HTML est chargé en Ajax.
Quand je fais une alerte sur $('#'+ tab + ' tbody').html() je ramène bien tous les tr avec les td.
J'ai le même soucis sous ie8 ou firefox, donc le navigateur n'est pas en cause.
Quand je fais

Code :

$('#'+ tab + 'tr').hover...(

là ça surligne le tr du thead.
Je ne m'explique pas pourquoi ce code ne surligne pas les tr du tbody.

Code :

1
2
3
4
5
6
7
8
9
 
$('#'+ tab + ' tbody tr').hover( 
		function(){
			$(this).addClass('dessus');
		}, 
		function(){
			$(this).removeClass('dessus');
		}
	);

Le tableau est chargé dans cette div :

Code :

1
2
 
<div id="conteneurTab"></div>

Le tableau HTML se trouve dans un script PHP :

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
 
$t = '<table id="tableau" name="tableau" border="0">';
$t .= '<thead>';
$t .= '<tr>';
$t .= '<th>Date</th>';
$t .= '<th>N° dépo.</th>';
$t .= '<th>Nom</th>';
$t .= '<th>Raison sociale</th>';
$t .= '<th>Nb. colis</th>';
$t .= '<th>N° commande</th>';
$t .= '<th>Référence article</th>';
$t .= '</tr>';
$t .= '</thead>';
$t .= '<tbody>';
while($row = mysql_fetch_array($reqTab)) {
	$t .= '<tr>';
	$t .= '<td class="date">'.$row['date_livraison'].'</td>';
	$t .= '<td class="depo">'.$row['dea_code'].'</td>';
	$t .= '<td class="nom">'.$row['dea_nom'].'</td>';
	$t .= '<td class="rais">'.$row['raison_social'].'</td>';
	$t .= '<td class="nbCol">'.$row['nb_colis'].'</td>';
	$t .= '<td class="num_commande">'.$row['num_commande'].'</td>';
	$t .= '<td class="refArt">'.$row['reference_article'].'</td>';
	$t .= '</tr>';
}
$t .= '</tbody>';
$t .= '</table>';

[danielhagnoul]

Bonsoir

Si vous chargez le tableau avec une transaction AJAX il est inconnu de jQuery lors du chargement de la page. C'est donc dans la méthode "success", après avoir installé le tableau dans le DOM, qu'il faut placer votre méthode "hover".

[arthuro45]

Bonjour,

J'utilise la méthode load() pour charger mon tableau HTML, et je n'ai pas vu "success" dans la doc pour cette méthode.

Code :

1
2
3
4
5
 
$('#conteneurTab').load('infoTab.php #'+tab, { 'str':val }, function() {
 
		surligneTr(tab);
	});

Je recharge un frament de page pour y placer mon tableau HTML.
surligneTr(tab); : le hover se trouve là.

[danielhagnoul]

Bonjour

La méthode load est une forme particulière de transaction AJAX, je ne pouvais pas deviner.

Normalement, en plaçant le code du "hover" dans la fonction de rappel, il devrait fonctionner. Bien entendu, l'ID de la table doit être unique et bien contenu dans la variable tab.

Code :

1
2
3
4
5
6
7
8
9
10
$('#conteneurTab').load('infoTab.php #'+tab, { 'str':val }, function() {
$('#'+ tab + ' tbody tr').hover( 
		function(){
			$(this).addClass('dessus');
		}, 
		function(){
			$(this).removeClass('dessus');
		}
	);
});

[Bovino]

On peut aussi bien utiliser la délégation d'événement :

Code :

1
2
3
$('table').on('hover', 'tr', function(){
    $(this).toggleClass('dessus');
});

ou bien (car 'hover' est déconseillé)

Code :

1
2
3
$('table').on('mouseenter mouseleave', 'tr', function(){
    $(this).toggleClass('dessus');
});

[danielhagnoul]

@Bovino : c'est la meilleure solution bien entendu. Parfois on ne voit pas clair, surtout lorsqu'on fait plusieurs choses en même temps. Bon je retourne sur Techdays TV

[arthuro45]

Envoyé par Bovino

...ou bien (car 'hover' est déconseillé)

Code :

Merci ça fonctionne impec !