Discussion :

[Guillaume_Caldera]

Salut, pour une apply web, j'ai besoin d'afficher un tableau.

D'abord des TH pour les titres des colonnes, puis une ligne de td avec des infos (class tr_normal), puis une ligne de td où je vais mettre la possiblité de modifier la ligne (class tr_hidden), et ainsi de suite.

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
 
	$("tr.tr_hidden").hide();
 
	$("tr.tr_normal").click(function(){
		$(this).next("tr").slideToggle("slow").siblings("tr.tr_hidden:visible").slideToggle("slow");
	});
 
});

Ca marche très bien, aucun soucis. Le problème c'est que c'est lent, pas fluide, ça clignote presque quand ça bouge. Bref j'suis pas satisfait.

J'ai fait des essais avec des <p> et des <div> à la place, et c'était vraiment super fluide, mais dès que j'utilise un tableau ça foire.

Y'aurait un moyen de rendre les choses plus fluides ? Ou sinon des éléments html qui me permettraient de simuler un tableau ?

[danielhagnoul]

Bonsoir.

Toutes les solutions utilisant des effets, apparition et disparation progressive, perturbent fortement l'affichage du tableau et c'est normal.

La seule solution :

Code :

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

1
2
3
4
$(".tr_normal").click(function(){
	$(".tr_hidden:visible").hide();
	$(this).next("tr").show();
});

[Guillaume_Caldera]

Merci bien, j'en étais arrivé également à cette déduction.

J'ai finalement trouvé une sorte de compromis entre la fluidité et l'animation.

Ca fonctionne plutot pas mal.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function(){
 
	$("tr.tr_hidden").hide();
 
	$("tr.tr_normal").click(function(){
		$(this).next("tr").fadeIn('fast').siblings("tr.tr_hidden:visible").toggle();
	});
 
});
</script>

Sinon je me demandais si il était possible de créer cette animation avec une autre librarire (Scriptaculous ou Mootools) ?