[Résolu]Cacher les lignes d'un tableau

Bonjour bonjour

J'aimerais savoir s'il est possible de faire des div à l'intérieur d'un tableau pour caché certaines lignes svp.


Ca donnerait un truc dans le genre :

<table><tr><th></th><th></th></tr>
   <tr><td></td><td></td></tr>
   <div id="unId" style="display:none;">
       <tr><td></td><td></td></tr>
    </div>
</table>

En fait je crois que c'est pas possible mais j'en ai besoin. J'ai un tableau où en fait j'ai des lignes récapitulatives de certaines parties, avec un petit plus devant, et quand je clique sur un petit plus d'une ligne, il faut que j'affiche le détail. En fait la ligne récapitulative représente les totaux d'une commande (quantité, MO, prix total, ...), et le détail, le détail de chaque article.

Merci
Modifié par poopsinou (12 Jul 2006 - 14:59)

Bon, sinon y'a une autre solution.

Je peux mettre un id à chaque tr, et les cacher, mais ça voudrais dire, qu'à chaque fois que je clique sur un plus, il faut que je récupère tous les id des tr cachés que je veux afficher ... c'est ce que je voulais éviter, je me suis dis qu'il y avait peut-être plus simple, d'où ma question.

Bon ben je crois je vais me lancer dans ma dernière solution

Beh, généralement, des lignes de tableaux, c'est pas fait pour être cachée T'es sur que tu as besoin d'un tableau ?
Sinon, comme je comprends pas vraiment ce que tu veux, je fais des suppositions :
tu as lien <a> dans un <tr>, quand on clique dessus (onclick), tu récupéres le parent de this et tu changes la propriété de display

En fait je fais un bilan d'affaire avec plein de chiffres d'où le tableau. Et en fait on a des grosses commandes (qui porte un numéro de dossier) qui contiennent plein de petites commandes (nommées par une lettre).
Ce qu'il faut que je fasse c'est un tableau qui au départ ne montre que les grosses commandes (donc la somme de toutes les petites commandes quoi), et ensuite quand je clique sur le plus devant un numéro de dossier de commande, en dessous, j'affiche toutes les petites commandes qui correspondent.

Bon ben finalement j'ai utilisé ma méthode. 9a marche sauf que j'ai de gros problèmes d'affichage (et j'ai pas trop compris ce que tu m'as proposé désolée)

Alors voilà un exemple sous IE :



Ce qui se passe là, c'est que si mon tableau est grand, que je descend vers la 3° ou 4° ligne et que je fais plus, ça m'affiche les petites commandes, et quand je fais -, pour les recacher, ben le menu qui était tuot en haut, viens se mettre au niveau de ce qui était le haut de la page quand on a affiché le détail, (en gros il repasse pas tout en haut, quand le tableau redevient plus petit).

Sous Firefox, il met même pas mes données de mes petites commandes dans les cases :



Voilà mes bouts de code un peu simplifié :

<table  border="1" bordercolor="#DDDDDD" cellspacing="0" cellpadding="5">
       <tr>
            <th rowspan="2"></th>
            <th rowspan="2">Dossier</th>
            <th rowspan="2">Quantité</th>
            <th colspan="5">Prix</th>
       </tr>
       <tr>
             <th>Matière</th>
             <th>MO matière</th>
             <th>Négoce</th>
             <th>PVU</th>
            <th>PVT</th>
       </tr>
       <tr>
             <td><input type="button" id="05L284A_34" name="plus" value="+" onClick='javascript:afficheTabDetail("05L284A_34",tabJS);' /></td>
             <td>05L284A_34</td>
             <td>25</td>
             <td>711.64</td>
             <td>347.6</td>
             <td>587.77</td>
             <td>2130.67</td>
             <td>7978.47</td>
      </tr>

................

Et voilà un bout du CSS (d'ailleurs si je définis pas de style directement dans le <table> il prend pas en compte ce que je met dans le CSS pour table, je comprends pas mais bon) :

#page_css table
{
	border-width : 1px;
	border-color : #DDDDDD;
	border-spacing : 0px;
	border-collapse : collapse;
	text-align : center;
	width : 600px;
}

#page_css th,#page_css td
{
	padding : 5px;
}

Et tout ça est dans un div qui a pour code :

body
{
	background-color:#FEFDCF;
}

#page_css
{
	text-align : center;
	display : block;
}

#page_css #corps
{
	width : 600px;
	margin : 0 auto;
	text-align : left;
}

Merci pour votre aide
Modifié par poopsinou (11 Jul 2006 - 14:17)

Des lignes de tableau récapitulatives, qui introduisent à chaque fois une sous-partie du tableau, sous-partie que l'on veut cacher/afficher à volonté…

Petite réflexion en passant : s'agit-il vraiment d'un seul grand tableau, ou d'une succession de petits tableaux sur le même modèle ? Parce que dans ce dernier cas, ça devient tout de suite plus simple : pouf, on cache un tbody…

Edit : ah ben non, ça ne semble pas être le cas de ce que tu veux faire.

Sinon, au lieu de faire une liste d'id, tu peux utiliser une fonction de type getElementByClass (il y a des scripts assez simples qui créent ce genre de fonction, il me semble), et donner une même classe (genre "detail1" pour toutes les lignes détaillant la première commande, puis "detail2", etc.) à toutes les lignes à cacher/afficher.
Modifié par mpop (11 Jul 2006 - 14:24)

Non c'est un seul grand tableau parce qu'en fait au final c'est la même commande (sauf qu'elle est sous formes de gros dossier eux-même sous forme de petit dossiers).

J'ai oublié le style du menu (bon c'est un menu qu'on m'impose donc le CSS était déjà fait pour le menu, d'ailleurs ça a été dur de trouver une solution qui casse pas ma mise en page à moi, mais j'ai trouvé ici grâce à vous lol). Peut-être que le problème vient de lui (bon c'est en javascript hein) :

menStyle = "<STYLE>";
menStyle +="A {COLOR:BLUE;";
menStyle +="   TEXT-DECORATION:none;";
menStyle +="   background:'none';";
menStyle +="   font-weight : bold}";
menStyle +="A:link {}";
menStyle +="A:visited {}";
menStyle +="A:hover {COLOR:RED}";
menStyle +=".menu { font-family: Verdana, Arial, Helvetica, sans-serif ;FONT-SIZE: 11px; font-weight: bold; color: #FFFFFF}";
menStyle +=".sousmenu{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385;";
menStyle +="  	background-color:#FEF4E9}";
menStyle +=".sousmenubis{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385}";
menStyle +=".sep{";
menStyle +="    background-color:#FEF4E9;";
menStyle +="    font-family: Verdana, Arial, Helvetica, sans-serif;";
menStyle +="    font-size: 1px;";
menStyle +="    border-bottom: 1px solid #005385;";
menStyle +="}";
menStyle +="</STYLE>";

Et pour le menu, il remonte bien sous Firefox, mais pas sous IE, et sous IE tout s'affiche bien mais pas sous Firefox
Modifié par poopsinou (11 Jul 2006 - 14:25)

Autre solution, c'est de faire une sorte d'info bulle quand on passe la souris sur ton + qui affiche donc un listing des petites commandes.
http://dypso.free.fr/tech/css_infobulle.php

Encore une autre solution :
On peut aussi faire plusieurs tableaux.
1 avec les grosses comandes, et pleins d'autres ; chaque autre tableau réprésentant le listing des petites commandes d'une grosses commande.

Au chargement de la page, tu caches toutes tes petites tableaux, et quand tu cliques sur un +, ca affiche le tableau correspondants
Principe ici : http://www.alistapart.com/d/eatcake/4.html

Oui mais je voulais que ça fasse parti du même tableau, c'est les même colonnes et tout etc etc ...
Et ça règle pas mes problèmes d'affichage ...

Et ça c'est bon, ça marche, j'suis passé par mes id (j'vais pas vu la solution de mpop, donc j'avais tout codé et ça marche lol), par contre j'ai ces fameux problèmes d'affichage que j'arrive pas à régler!
Modifié par poopsinou (11 Jul 2006 - 15:07)

bon,
sachant que td est un élement de type block, qu'il peut contenir des elements de type block et inline.

Tu as donc le droits par exemple de mettre un div, ou bien un ul...
Donc, tu ajoutes sur ton boutton + l'evenement qui va afficher ou cacher ton ul suivant. (tu tests la valeur de sa propriété display, si il vaut none, tu mais bloc, sinon, tu mets none... facile)

Au passage, tu changes la propriété de ton boutton value en value="-" pour faire comprendre qu'en recliquand dessus, ca cache.

Le code js pour affiche ou cacher un element selon son ID

function SwapShow(what)
{
  if (!document.getElementById) return null;
  elm = document.getElementById(what);
  if (elm.style.display == "none")
    elm.style.display = "block";
  else
    showWhat.style.display = "none";
}

Modifié par nORKy (11 Jul 2006 - 15:17)

Mais ça je l'ai fait!! J'ai dis que ça marche lol
Mais j'ai des problèmes d'affichage.

Euh en fait j'ai pas tout à fait fait comme toi ...
J'ai mis un id sur le tr et je lui met none, ou block ... Tu crois que ça vient de là ???

J'ai essayé la méthode des ptits tableaux cachés, mais ça donne pas le rendu que je veux, (comme les lignes récapitulatives)
Modifié par poopsinou (11 Jul 2006 - 15:28)

dans le cas d'un tr, display doit valoir 'table-row' pt etre, et non pas block je crois

Waouw, je connaissais pas lol
Bon ben c'est bien, maintenant ça s'affiche très bien sous Firefox mais plus sous IE ... AH ben bravo
Bon peut-être que IE connais pas table-row, je vais chercher !

Bon en fait j'ai trouvé la solution sur ce site même
j'ai fait :

if(navigator.appName == "Microsoft Internet Explorer")
{
	window.document.getElementById(tabDossier[clef][indice]).style.display = "inline";
}
else
{
	window.document.getElementById(tabDossier[clef][indice]).style.display = "table-row";
}

Donc merci pour vos réponses déjà, j'ai le principal qui marche ça va
Mais il me reste toujours le menu sous IE qui se remet pas en haut !!
En fait, si après je rebouge lap age (si y'a une scrollbar), ben le menu va remettre en haut, sinon il reste là où il veut rester
Modifié par poopsinou (11 Jul 2006 - 15:50)

poopsinou a écrit :

Bon en fait j'ai trouvé la solution sur ce site même
j'ai fait :

if(navigator.appName == "Microsoft Internet Explorer")
{
	window.document.getElementById(tabDossier[clef][indice]).style.display = "inline";
}
else
{
	window.document.getElementById(tabDossier[clef][indice]).style.display = "table-row";
}

Euh, normalement, tr devrait être considéré comme block et pas inline dans ce cas.

Ben oui, ben les deux ça marche, mais je vais mettre block !
Merci de me l'avoir rappelé!

Sinon est-ce que quelqu'un voit pourquoi le menu ne veut pas rester en haut ??
Modifié par poopsinou (11 Jul 2006 - 16:17)

Bon pour mon menu j'ai trouvé qu'il y avait plus de code que ce que je croyais (enfin c'est pas mon menu, mais je suis obligé de l'utiliser ...)

Donc hop je met ce que je pense être utile :

// Style
menStyle = "<STYLE>";
menStyle +="A {COLOR:BLUE;";
menStyle +="   TEXT-DECORATION:none;";
menStyle +="   background:'none';";
menStyle +="   font-weight : bold}";
menStyle +="A:link {}";
menStyle +="A:visited {}";
menStyle +="A:hover {COLOR:RED}";
menStyle +=".menu { font-family: Verdana, Arial, Helvetica, sans-serif ;FONT-SIZE: 11px; font-weight: bold; color: #FFFFFF}";
menStyle +=".sousmenu{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385;";
menStyle +="  	background-color:#FEF4E9}";
menStyle +=".sousmenubis{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385}";
menStyle +=".sep{";
menStyle +="    background-color:#FEF4E9;";
menStyle +="    font-family: Verdana, Arial, Helvetica, sans-serif;";
menStyle +="    font-size: 1px;";
menStyle +="    border-bottom: 1px solid #005385;";
menStyle +="}";
menStyle +="</STYLE>";

Je pense que c'est le style général, et maintenant il y a ça qui se promène dans le reste du code du menu :

// Ne pas modifier
displaynone();

window.onresize = scroller;
window.onscroll = scroller;
}
function scroller(){
  menukill(1)
  // Bouger le menu
  document.getElementById("caleck2").style.top=document.body.scrollTop;
}

Et puis ça :

html += "<DIV id=caleck2 style=\"position:absolute;top:0px;left:0px;z-index:92;\">";

Peut-être que là dedans, il y a quelque chose qui fait que sous IE, le menu remonte pas de lui-même tout en haut, non ??

Merci

Bon ben tant pis pour IE ...
Je vais dire que c'est résolu
Modifié par poopsinou (12 Jul 2006 - 14:59)