Bonjour,

Je débute avec jQuery, et je cherchais un moyen d'afficher un tableau avec des informations de base, tout en cachant des informations détaillées qui apparaissent/disparaissent lorsque l'on clique sur une ligne.

J'ai trouvé un exemple très simple à mettre en oeuvre sur le site javascripttoolbox.

Le code est le suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});
Mon problème est que les informations de base et suffisantes à l'essentiel des utilisateurs nécessitent une largeur x alors que l'affichage des détails impose une largeur y (y>x).
Je sais comment étendre la largeur des colonnes en ajoutant ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
 
			$(this).children('td').css("width","32em");
dans le bloc .click(function)

Je parviens ainsi à étendre la largeur des colonnes quand j'affiche les détails.
Mais je ne parviens pas à trouver une solution pour revenir à une taille inférieure quand je cache les détails.

Peut-être faudrait-il associer une fonction à exécuter au hide... mais je n'y suis pas parvenu.

Merci de votre aide.
J-L