[jQuery] $().show() et prop css display:block

**Herode** · 18/09/2008, 17h53

Bonjour à tous,

J'utilise jQuery pour gérer l'affichage d'une ligne de tableau. En résumé, l'utilisateur clique sur un bouton placé dans un <td> d'une ligne <tr> de 2 colonnes. Cela fait apparaître une ligne en dessous, un <td> unique de colspan=2.
L'appel jQuery est :

Code :

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

$('#ma_ligne').show(300);

Mon problème vient ce que jQuery affecte la propriété css display:block à la ligne qui reçoit le show. Du coup, le résultat est incorrect sous FF, Opera, etc... (mais pas sous IE7) : la nouvelle ligne ne s'étend que sur la largeur d'une colonne au lieu d'occuper toute la place disponible.

Vous pouvez tester vous-même le comportement avec le bout de code HTML suivant si vous avez des doutes :

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
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">  
  <head>		 		     
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />		     
    <style type="text/css">
	.line_one { background : lime; }
	.line_two {background : red; }
    </style>
  </head>
  <body>    	  
 
    <table>			                                                           
      <tr class="line_one">				                                                   
        <td>colonne 1</td>                                                           
        <td>colonne 2</td>                                                  
      </tr>	
 
      <tr class="line_two" style="display: block;">			                     
        <td colspan="2">7777777777777777777</td>                                  
      </tr>			       
    </table>  
  </body>
</html>

Comment puis-je faire alors pour utiliser ce genre d'effets animés sur un élément de tableau ????

**Helfima** · 18/09/2008, 18h24

le mieux c'est de pas utiliser de tableau

sinon ben place une div dans ta ligne TD et joue dessus

**Spir** · 19/09/2008, 09h31

Il y a un truc que je ne comprend pas. Ton td dont le colspan est à 2 qui va apparaitre, il existe deja puisque tu fais un show. Pourquoi ne l'ajoute tu pas plutot a la main (en utilisant after)?

http://docs.jquery.com/Manipulation/after

Si on clique sur un td tu ajoute un tr avec un td de colspan 2 juste apres le tr qui contient le td qui a lancé le trigger (ca embrouille un peu là non?)

Utilise Parent() pour remonter au TR puis after() pour ajouter le tr contenant le td a colspan 2.

http://jquery.developpeur-web2.com/d...hp#fonction_93

Non?

**Herode** · 19/09/2008, 10h26

Il y a un truc que je ne comprend pas. Ton td dont le colspan est à 2 qui va apparaitre, il existe deja puisque tu fais un show. Pourquoi ne l'ajoute tu pas plutot a la main (en utilisant after)?

Dans ce cas précis, je fais un after() sur un tr en display:none, puis une fois le tr inséré on est dans le cas indiqué et je fais show(300) pour les effets visuels.

Si on clique sur un td tu ajoute un tr avec un td de colspan 2 juste apres le tr qui contient le td qui a lancé le trigger (ca embrouille un peu là non?)

En l'occurrence, j'ai une page qui présente un tableau des objets métier de tel ou tel type avec une ligne d'infos résumées par objet (libellé, une ou 2 stats en plus, des boutons de gestion). Le libellé est lui-même un bouton. Quand on clique dessus, cela fait apparaitre en dessous les infos complètes sur l'objet. J'insère donc une nouvelle ligne (tr) à une cellule, je lui donne le colspan requis et je place les infos détaillées dedans avant de la montrer. Ce qui se fait via ajax(), load(), after() et show() respectivement.
Si tu as plus simple en respectant les specs, je suis preneur bien sûr !

le mieux c'est de pas utiliser de tableau

Hé, vieux débat !

Je connais le principe du tout CSS / no-array. J'avoue que je ne suis toujours pas convaincu. Les layouts CSS sont assez pénibles à manier et je trouve personnellement cette approche très lourde. Cela dit, je ne suis pas un expert en CSS. En outre, dans le cas de données tabulaires, le souci est de dessiner de jolies colonnes pour bien aligner verticalement les éléments qui se trouvent dans ces colonnes. Et là, pour faire ça avec des CSS sur des tableaux pouvant contenir une centaine de lignes, 4-5 colonnes dont certaines contiennent des libellés qui peuvent (mais ce n'est pas sûr...) avoir des textes assez longs qu'il faudra splitter sur plusieurs lignes dans leur cellule... hé bien je ne sais tout simplement pas faire. Alors que le tableau gère tout seul ses largeurs de colonnes, ce qui est bien agréable, non ?

**Spir** · 19/09/2008, 11h22

Nan nan moi je pense que le choix du tableau se justifie tout a fait ici.

**Spir** · 19/09/2008, 11h26

Dans ce cas précis, je fais un after() sur un tr en display:none, puis une fois le tr inséré on est dans le cas indiqué et je fais show(300) pour les effets visuels.

Il y a pas une autre alternative à ca? Tu ajoute en JS le TR. Donc il est pas hidden, donc pas de "display: block". Et sur le add() tu peux sans doute faire un effet. C'est pas possible ca?

**Herode** · 19/09/2008, 16h28

Apparemment non : pas de callbacks associables au add().
Autre inconvénient : ajouter une tr visible puis appliquer des effets dessus risque de provoquer un effet de clignotement peu agréable, non ?
Je pourrais essayer de manipuler un effet de jQuey UI après le after() mais il faut que j'inclue de nouveaux fichiers pour cela.

En attendant mieux, j'ai modifié jQuery.js en remplaçant les "display:block" par des "display:". Reste à voir si cela n'a pas d'effets indésirables ailleurs. Je vais essayer de signaler le bug et d'en toucher deux mots aux développeurs pour voir...

**Spir** · 22/09/2008, 09h39

J'avais utilisé un plugin pour ajouter dynamiquement une ligne a un tableau (listing d'elements, boutons "ajouter" créant une ligne pour ajouter dynamiquement un nouvel élément). Le plugin demandais la création d'un tfoot. Un Footer de tableau donc.
Peut etre qu'il faut passer par ca. T'as regardé si il n'y avait pas des solutions existantes?

[jQuery] $().show() et prop css display:block

jQuery

Discussions similaires

Partager

Partager