Cacher une partie d'un tableau (colonnes) proprement ? [Résolu]

[chateau_dur]

Salut à tous,

J'ai un problème simple que je n'arrive pas à régler. C'est probablement plus du HTML que du javascript.

J'ai crée le tableau suivant :


Avec le code suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <table border="1" bordercolor="#3c3c3c" cellspacing="0" cellpadding="5">                
                <tr bgcolor="#96ca2d">
                    <th><font color="#ffffff" type="bold">Nom</font></th>
                    <th><font color="#ffffff">Prénom</font></th>
                    <th><font color="#ffffff">E-mail</font></th>
                    <th><font color="#ffffff">Code Op</font></th>
                    <th><font color="#ffffff">Photo</font></th>
                    <th id="titreLv2" style="display:none"><font color="#ffffff">LV2</font></th>
                    <th id="titreOrdi" style="display:none"><font color="#ffffff">Ordinateur</font></th>
                    <th id="titreConnex" style="display:none"><font color="#ffffff">Internet</font></th>
                </tr>          
                <xsl:for-each select="contact/etudiant">
                    <tr>
                        <td onclick="affiche(this.value)"><b><xsl:value-of select="nom"/></b></td>
                        <td><xsl:value-of select="prenom"/> </td>
                        <td><xsl:value-of select="mail"/> </td>
                        <td><xsl:value-of select="code_op"/> </td>
                        <td><img><xsl:attribute name="src"><xsl:value-of select="photo" /></xsl:attribute></img> </td>                       
                        <td id="contenuLv2" style="display:none"><xsl:value-of select="lv2"/></td>
                        <td id="contenuOrdi" style="display:none"><xsl:value-of select="ordi"/></td>
                        <td id="contenuConnex" style="display:none"><xsl:value-of select="connexion"/></td>
                    </tr>
                </xsl:for-each>		
                </table>

Avec mon lien au dessus du tableau, j'affiche d'autres colonnes qui sont en "style=display:none" par défaut.

Lorsque je les affiche, la structure du tableau n'est pas respectée :



Problèmes :
- la dernière colonne de titre contient 3 lignes qui sont censées être mes 3 colonnes titres cachées...
- les données correspondantes (les 3 lignes à fond blancs apparues) ne marche que pour la première entrée. Alors qu'elle proviennent d'un xsl:for-each qui fonctionne pour les colonnes précédentes.


J'ai testé de passer les champs à afficher/cacher en "visiblity=hidden" ça a l'air de régler le problème mais le tableau laisser un espace vide là où sont cachés les colonnes, c'est donc très moche.

Quelqu'un a une idée pour arranger ça ?

Merci


J'ajoute mon code Javascript au cas où mais je pense que le problème ne vient pas de là

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
function toggle(monId) {
					var monElement = document.getElementById(monId);
					if(monElement.style.display == 'none') 
					  monElement.style.display = 'block';
					  else 
					  monElement.style.display = 'none';
					}
					function toggleOn(monId) {
							var monElement = document.getElementById(monId);
							monElement.style.display = 'block';
					}
					function toggleOff(monId) {
						var monElement = document.getElementById(monId);
						monElement.style.display = 'none';
					}
					function afficheInfos(){
						toggle("titreLv2");
						toggle("titreOrdi");
						toggle("titreConnex");
						toggle("contenuLv2");
						toggle("contenuOrdi");
						toggle("contenuConnex");
					}

[E.Bzz]

Bonjour,
tu devrais pouvoir utiliser

Code html :

1
2
3
4
5
<colgroup>
        <col id="col1">
        <col id="col2">
        <col id="col3">
</colgroup>

Ainsi, en modifiant le display d'un <col> tu interviendras sur l'ensemble de la colonne du tableau.
Attention par contre si tu as des colspan ...

A+

[chateau_dur]

Merci pour la réponse. Par contre je n'arrive à faire marcher ces balises, voilà ce que j'ai fait :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table border="1" bordercolor="#3c3c3c" cellspacing="0" cellpadding="5">                
            <colgroup>
                <col id="infoDeBase" span="5">	
                <col id="lv2" style="display:none">
                <col id="ordi" style="display:none">
                <col id="connexion" style="display:none">
            </colgroup>
	                <tr bgcolor="#96ca2d">
                    <th><font color="#ffffff" type="bold">Nom</font></th>
                    <th><font color="#ffffff">Prénom</font></th>
                    <th><font color="#ffffff">E-mail</font></th>
                    <th><font color="#ffffff">Code Op</font></th>
                    <th><font color="#ffffff">Photo</font></th>
                    <th><font color="#ffffff">LV2</font></th>
                    <th><font color="#ffffff">Ordinateur</font></th>
                    <th><font color="#ffffff">Internet</font></th>
                </tr>          
                <xsl:for-each select="contact/etudiant">
                    <tr>
                        <td onclick="affiche(this.value)"><b><xsl:value-of select="nom"/></b></td>
                        <td><xsl:value-of select="prenom"/> </td>
                        <td><xsl:value-of select="mail"/> </td>
                        <td><xsl:value-of select="code_op"/> </td>
                        <td><img><xsl:attribute name="src"><xsl:value-of select="photo" /></xsl:attribute></img> </td>                       
                        <td><xsl:value-of select="lv2"/></td>
                        <td><xsl:value-of select="ordi"/></td>
                        <td><xsl:value-of select="connexion"/></td>
                    </tr>
                </xsl:for-each>		
                </table>

Il me fait une erreur sur la fermeture de colgroup
Si je ferme mes <col/>, la page fonctionne mais toutes les colonnes sont affichées.

Je ne sais pas pourquoi çe ne marche si je laisse mes col ouvertes.

Des idées ?

[chateau_dur]

J'ai trouvé.

Il faut en effet fermer les "col".

Par contre, "display:none" ne fonctionne pas sur ces balises.

Il faut utiliser "visibility:collapse".

Voilà !

[E.Bzz]

Désolé pour les </col> : un copier/coller un peu rapide, à partir d'une source ... pas assez fiable
(par contre, je pensais que le display fonctionnait)

A+