Discussion :

[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 :

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

$('#'+ 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 :

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

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 :

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

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

Le tableau HTML se trouve dans un script PHP :

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
 
$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 :

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

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 :

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

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 :

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

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

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

Code :

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

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]

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

Code :

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

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

Merci ça fonctionne impec !