11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Aficher/masquer dans une <table>

Bonjour,

Dans un de mes tableaux, chaque <tr> contient une <div> masquée.
Je souhaite afficher/masquer cette <div> au survol de la <tr> parente, le tout en jQuery...

Mon code html:

<table>
  <tr class="tr_color2">
    <th>Nom</th>
    <th>Taille</th>
    <th>Catégorie</th>
  </tr>
  <tr class="tr_color1">
     <td>SFR 00000102012.pdf
       <div class="ss_menu"><a href="#">Consulter</a></div></td>
     <td>XXXXX</td>
     <td>Facture</td>
</tr>
<tr class="tr_color2">
     <td>SFR 00000102012.pdf
     <div class="ss_menu"><a href="#">Consulter</a></div></td>
     <td>XXXXX</td>
</tr>
</table>


Voilà où j'en suis côté jQuery: 

$(function() {
	$('.ss_menu').hide();
	$('tr').hover(
		function () { $('td div.ss_menu').show(); });
	});



Le problème: au survol, TOUTES les <div class="ss_menu"> s'affichent, et moi je ne souhaite afficher QUE celle dont on survole la ligne <tr>... Je n'arrive pas à "cibler" la <tr> survolée.

Si vous avez des idées, je suis preneur Smiley smile
Modifié par speedlab (14 Jun 2012 - 17:28)
Bonjour, tu devras évidemment spécifier le contexte du <tr> survolé ($(this)) et à l'intérieur de celui-ci sélectionner les <div>



$(function() {
	$('.ss_menu').hide();
	$('tr').hover(function () {
            $(this).find('.ss_menu').show();
        });
});
Bonjour Vaxilart,
Et merci, ça fonctionne parfaitement. Smiley cligne

J'aurai cependant dû préciser que je souhaite que le masquage de la <div> s'effectue lorsque la souris sort du <tr>...

J'ai essayé ça sans succès: 
	$(function() {
		$('.ss_menu').hide();
		$('tr').hover(
			function () { $(this).find('.ss_menu').show(); });
		$('tr').out(
			function () { $(this).find('.ss_menu').hide(); });
	});


Je ne suis pas sûr que out() existe, ni que la syntaxe de la fonction soit juste...

Une piste? Smiley sweatdrop
Ok, je me réponds, le week-end m'a fait du bien Smiley lol
J'ai contourné en écrivant le code ci-dessous:

$(document).ready(function() {

	/* on masque les sous-menus de chaque ligne du tableau */
	$('.ss_menu').hide();
	
	/* au survol, on affiche */
	$('tr').hover(function(){
		$(this).find('.ss_menu').show();
	}, function() {
		$(this).find('.ss_menu').hide();
	});

});


Mais le code peut-il être optimisé?
Tu peux aussi écrire ceci :
$(function ()
{
	$(".ss_menu").hide();
	$("tr").on("mouseenter", function () { $(this).find(".ss_menu").show();	});
	$("tr").on("mouseleave", function () { $(this).find(".ss_menu").hide();	});
});
mais ca revient exactement au même de ce que tu as fait !

Une petite différence, tout de même, le 
	$(".ss_menu").hide();
je l'aurai fait en CSS :
.ss_menu {
	display : none;
}
ce qui te fait gagner une ligne en Jquery !
Modifié par tournikoti (18 Jun 2012 - 13:22)
Je ne sais pas si tu le sais mais tu peux le faire aussi en CSS : 
.ss_menu		{ display : none; }
tr:hover div.ss_menu	{ display : block;}
Sujet clos
Aller à