Sujet Précédent Sujet Suivant

Afficher/masquer colonnes d'un tableau

Résolu/Fermé
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 - 21 juin 2011 à 10:46
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 - 7 déc. 2011 à 19:47
Bonjour,

Je cherche une solution afin de permettre à des utilisateurs d'avoir un aperçu détaillé ou non, de colonne d'un tableau.

Par exemple, mr X voit l'affichage de ses clients. On voit un bouton "détail" par exemple sur la droite du tableau et dès que l'on clique dessus, on obtient par exemple la commune du client.

Je pense utiliser le javascript avec les display:none et block mais je ne sais pas comment m'y prendre.

Merci pour toute aide apportée :)

18 réponses

Réponse 1 / 18
Popoï
21 juin 2011 à 13:02
Tu peux modifier du css avec du javascript:

http://www.siteduzero.com/tutoriel-3-8133-le-css-via-js.html

Tu dois pouvoir t'en sortir avec ça.
0
Réponse 2 / 18
Mik4d0 Messages postés 10 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 12 septembre 2012 6
Modifié par Mik4d0 le 21/06/2011 à 13:20
Bonjour,

A coller au dessus dans le head ou dans le body...



<table>
<tr>

<!-- Détail numéroté : detail 1 -->
<td>Monsieur X <a href="javascript:showhide('detail1');">Détail</a></td>

<!-- Détail numéroté caché : detail 1 -->
<td><div id="detail1" style="display: none;">Les détails qui ne sont pas visibles</div></td>
</tr>
</table>

Avec une boucle PHP, tu peux alors donner une liste de données cachées, je m'en suis servi pour la programmation d'un site de gestion, ça marche pas mal, on peut y inclure un formulaire à l'intérieur du DIV.

Essayez, et dites moi si ça marche,
Mik4do :-)
0
Réponse 3 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
21 juin 2011 à 13:38
Merci tout d'abord des réponses :).

Piur le showhide(), c'est une fonction de base ou il faut la faire?

Merci Popoï, je vais me renseigner ;)

Je vous tiens au courant.
0
Réponse 4 / 18
Mik4d0 Messages postés 10 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 12 septembre 2012 6
21 juin 2011 à 13:41
Arf...

< sc rip t lang uage="jav ascript" >
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {state = 'none';}else {state = 'block';}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;}
if (document.getElementById &&!document.all) {hza = document.getElementById(layer_ref);hza.style.display = state;}}
//-->
< / s cr i p t >


Il s'est effacé..

Bon amusement,
Mik4do
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 18
Popoï
21 juin 2011 à 14:11
Mon principe peut paraître un peu simpliste, mais pourquoi ne pas faire une fonction qui fait apparaître/disparaître les lignes de ton tableau en fonction de la valeur de la propriété css "display", et mettre "none" dans un cas, "" dans l'autre? Il y aurait plus qu'à l'appeler quand on clique sur un bouton, non?
0
Réponse 6 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
21 juin 2011 à 14:24
Oui, c'est ce que j'essaie de voir, sauf qu'il s'agit de colonnes.

D'ailleurs j'ai un problème, l'attribut display:none ne fonctionne pas sur les div, enfin en tout cas celles qui contiennent des th ou des td, du coup, je suis obligé d'appliquer le style display:none à chaque td et th. Il y a pas plus simple?


Je vous dis comment çà évolue.
0
Réponse 7 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
Modifié par benf35 le 21/06/2011 à 15:02
Bon, je n'y arrive pas. La division ne veut pas se cacher. Voici mon code: 

<table> 
   <tr> 
          <th>Client</th> 
          <div id="cacheclient" style="display:none;">               
                    <th>Commune</th>       
                    <th>....</th> 
          </div> 
   </tr> 
   <td> 
    ... 
   </td> 
</table>


Rien qu'en faisant çà, le tableau s'affiche en entier, alors que le display vaut none.
0
Réponse 8 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
21 juin 2011 à 17:08
J'suis en train de faire autre chose en attendant mais je suis vraiment bloqué :/

Il n'apprécie peut être pas que la balise <tr> soit coupée? Car j'ai essayé de le faire sur la balise tr et çà marche. De même sur les td et th.

Il y aurait une restriction?

Et surtout un moyen de passer outre?
0
Réponse 9 / 18
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
21 juin 2011 à 23:08
Ben tu peux créer une feuille de style CSS nommée "style.css" qui dit que, pour tous les éléments qui auront la classe "détail", il y aura display: none;
.détail {
display: none;
}
dans la partie head de ton code html, tu marques ceci:
<LINK rel = "stylesheet" type = "text/css" href = "CheminDeTaFeuilleDeStyle/style.css">
et t'as plus qu'à donner la classe "détail" à toutes les cases à cacher.
Dans ton bouton, tu appelles une fonction qui stocke tous les objets qui ont la classe "détail" dans un array et tous les objets qui ont la classe "daff" dans un autre array.
Pour chaque élément du premier array tu attribues la classe "daff" et pour le second array tu attribues à tous les objets la classe "détail".
Déclare ta fonction après le tableau.
Et voilà!!!
En espérant avoir été clair ^^
0
Réponse 10 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
22 juin 2011 à 09:07
Bonjour :)

J'ai déjà une (même plusieurs) feuilles de styles. Cependant, que ce soit en indiquant le style directement dans la balise, ou via une feuille de style, l'élément div comportant l'attribut display:none s'affiche toujours.

J'ai essayé en appliquant directement sur les balises td et th situées dans les div. Cela fonctionne avec un td, mais pas sur tous, car on ne peut avoir un id portant le même nom sur plusieurs éléments.

Du coup, à part donner un id différent et appeler la fonction correspondante sur chaque élément, je ne sais pas quoi faire. Mais cette solution est beaucoup trop longue et lourde.
0
Réponse 11 / 18
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
22 juin 2011 à 11:20
J'ai testé chez moi, et ce code fonctionne:

<HTML>
<HEAD>
<LINK rel = "stylesheet" type = "text/css" href = "Style.css">
</HEAD>
<BODY>
<TABLE border = "1" width = "25%">
<TR>
<TD width = "50%">Riri
<TD width = "50%">Pif
<TR class = "nonaff" id = "détail">
<TD width = "50%">Fifi
<TD width = "50%">Paf
<TR>
<TD width = "50%">Loulou
<TD width = "50%">Pouf
</TABLE>
<FORM>
<INPUT type = "button" onclick = "switchaff()">
</FORM>
<SCRIPT>
function switchaff() {

if (document.getElementById('détail').className == 'aff') {

document.getElementById('détail').className = 'nonaff';

}
else {

document.getElementById('détail').className = 'aff';

}
}
</SCRIPT>
</BODY>
</HTML>


Et voici ce qu'il faut mettre dans la feuille de style CSS:

.nonaff {
display: none;
}


Il est fait vite-fait, sans aucune recherche d'esthétisme...
La ligne qui contient Fifi et Paf a la classe "nonaff" et respecte donc la feuille de style css (il a la propriété display: none).
Quand on clique sur le bouton, on cherche l'objet qui a l'id "détail" (à savoir la ligne cachée), si elle a la classe "nonaff" (qui force la ligne à ne pas être affichée), on lui donne un autre nom de class (par opposition, j'ai dis "aff" mais j'aurais très bien pu mettre ""), et si elle n'a pas cette classe (ce qui veut dire que la ligne est affichée), on lui re-donne cette classe, pour la cacher.
T'as plus qu'à donner l'id "détail" et la class "nonaff" sur chaque borne <TR> des lignes de ton tableau que tu veut masquer et appliquer ce code.
Si t'as un problème chez toi avec ça: dis le moi.
0
Réponse 12 / 18
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
22 juin 2011 à 11:23
Ah! pardon: tu parlais de COLONNES à faire disparaître!!!
Je vais penser un peu, puis quand j'aurais un truc: je poste
0
Réponse 13 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
22 juin 2011 à 11:37
Oui voilà, des colonnes:

En fait, du style là a peu près: 

<HTML>
<HEAD>
 <link href="./css/styles.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY>
<TABLE border = "1" width = "25%">
<TR>
    <Th width = "50%">Riri </th>
    <Th width = "50%">Pif </th>
    <Th width = "50%">Riri </th>
    <Th width = "50%">Pif </th>
    <Th width = "50%">Riri </th>
    <Th width = "50%">Pif </th>
    <Th width = "50%">Riri </th>
    <Th width = "50%">Pif </th>
    <Th width = "50%">Riri </th>
    <div id = "détail" class="nonaff">
      <Th width = "50%">Milou </th>
      <Th width = "50%">Haddock </th>
    </div>
</tr>
<TR>
    <TD width = "50%">Riri </td>
    <TD width = "50%">Pif </td>
    <TD width = "50%">Riri </td>
    <TD width = "50%">Pif </td>
    <TD width = "50%">Riri </td>
    <TD width = "50%">Pif </td>
    <TD width = "50%">Riri </td>
    <TD width = "50%">Pif </td>
    <TD width = "50%">Riri </td>
    <div id = "détail" class = "nonaff">
      <TD width = "50%">Bobatintin </td>
      <TD width = "50%">Tournesol </td>
    </div id = "détail" class="nonaff">
</TR>
</TABLE>
<FORM>
<INPUT type = "button" onclick = "switchaff()">
</FORM>
<SCRIPT>
function switchaff() {

if (document.getElementById('détail').className == 'aff') {

document.getElementById('détail').className = 'nonaff';

}
else {

document.getElementById('détail').className = 'aff';

}
}
</SCRIPT>
</BODY>
</HTML>


Seulement çà fonctionne pas (même en mettant l'id des th et des td différents)
0
Réponse 14 / 18
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
22 juin 2011 à 12:55
Voilà,
j'ai dû penser plus longtemps pour adapter ce code aux colonnes puisque l'on ne peut tout simplement pas désigner toutes les case d'une colonne de tableau par un seul id comme je le faisait pour mes lignes.

voilà mon code html:
<HTML>
<HEAD>
<LINK rel = "stylesheet" type = "text/css" href = "Style.css">
</HEAD>
<BODY>
<SCRIPT>

function switchaff() {

listenonaff = document.getElementsByClassName('nonaff');
listeaff = document.getElementsByClassName('aff')

if (listenonaff.length == 0) {

while(listeaff.length>0)
{
listeaff[0].className = 'nonaff';
}
document.getElementById('tableau').id = "tableauhidden";
}
else {

while(listenonaff.length>0)
{

listenonaff[0].className = 'aff';
}

document.getElementById('tableauhidden').id = "tableau";
}

}
</SCRIPT>
<TABLE border = "1" width = "25%" id = "tableauhidden">
<TR>
<TD width = "50%">Riri
<TD width = "50%" class = "nonaff" id = "pif">Pif
<TR>
<TD width = "50%">Fifi
<TD width = "50%" class = "nonaff" id = "paf">Paf
<TR>
<TD width = "50%">Loulou
<TD width = "50%" class = "nonaff" id = "pouf">Pouf
</TABLE>
<FORM>
<INPUT type = "button" onclick = "switchaff()">
</FORM>
</BODY>
</HTML>


et son meilleur ami la feuille css:

.nonaff {
display: none;
}
#tableauhidden {
width: 12%;
}
#tableau {
width: 25%
}


explication: pour déterminer ce qui devait pouvoir être affiché/effacé du tableau, j'ai donné une classe nonaff (non-affiché) pour chaque case à cacher. Et puisqu'une colonne était cachée, je devais réduire la largeur de mon tableau (d'où tableauhidden pour "tableau en partie caché").
quand je clique sur mon bouton, je stocke dans une liste toutes les cases qui ont la classe nonaff (ton tableau est soit long de 3, soit de 0) et une autre liste qui contient tous les objets de la classe aff (soit 3 soit 0). Si listenonaff.length est égal à 0, c'est que tout est affiché et qu'il faut donc tout effacer: avec cette boucle while, je le fais. Je mets pas de for pour cette raison:
https://www.webrankinfo.com/forum/t/getelementsbyclassname-nen-renvoie-quun-sur-2.130896/
enfin je donne au tableau une largeur adaptée pour le nombre de colonnes.

Si listenonaff.length est différent de 0, c'est que toutes les cases sont effacées: il faut donc les afficher. Cette boucle le fait: pas de boucle for pour la même raison. Et enfin je donne au tableau une largeur qui permette de contenir toutes les colonnes.

Ton seul soucis est de savoir quel pourcentage mettre pour la largeur du tableau quand détail est caché: mais en testant un peu, tu devrais rapidement trouver la valeur idéale de tableauhidden.
0
Réponse 15 / 18
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
22 juin 2011 à 12:56
Si ça marche pas chez toi, dis le moi
0
Réponse 16 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
22 juin 2011 à 14:11
Merci ! Je teste, et je te dis ;)
0
Réponse 17 / 18
benf35 Messages postés 37 Date d'inscription mercredi 28 février 2007 Statut Membre Dernière intervention 21 août 2011 4
22 juin 2011 à 15:05
Je te remercie pour ton aide, çà fonctionne nikel :).

Merci !
0
Réponse 18 / 18
Eskalope
5 déc. 2011 à 17:45
...quelques mois plus tard,

Étant dans la même situation, je me suis penché sur la solution proposée ici et en ce qui me concerne, après l'avoir testé, il fonctionne parfaitement sur Firefox ou Chrome mais malheureusement, il ne fonctionne pas sur IE.

Quelqu'un peut-il me donner une piste de solution pour faire fonctionner ce type de script sur tous les navigateurs web à la fois?

Pour info, j'utilise un autre script pour exporter un tableau html vers excel qui lui ne fonctionne que sur IE, c'est à y perdre complètement la tête :-(
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
5 déc. 2011 à 18:44
Je pourrais savoir quelle version de IE tu utilises?
Aussi je vois pas pourquoi ça marcherait pas sur IE... sauf si c'est encore une merveilleuse oeuvre du mode quirks (quand on met pas de doctype...). Mais je préfère pas m'avancer là tant que j'ai pas testé. Je vais essayer d'abord et voir...
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
5 déc. 2011 à 19:01
petite remarque sur le code: j'avais pas fermé mes balises <tr> ^^'
Mais même en corrigeant les balises et en ajoutant un doctype, et ben oui, ça marche pas...
Je regarde si je trouve pourquoi
0
Eskalope
6 déc. 2011 à 09:08
Oui, j'avais remarqué, c'est un détail ça, j'utilise IE 9.0.3 64bits pour info, toujours pas de solution? Je continue aussi à chercher de mon côté...
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
6 déc. 2011 à 22:17
Et ben... IE nous aura vraiment tout fait, comme erreur... ^^
0
Eskalope
7 déc. 2011 à 12:07
Oui, dommage, je trouvais qu'il s'était beaucoup améliorer, du coup on restera sous firefox en attendant...Merci quand même pour ton aide et la solution juste au dessus! :-)
0

Discussions similaires

ou sont les bananes ?
Liline -
Le Pro -

2 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Tableau croisé dynamique : différence entre deux colonnes
jds2016 -
sal -

6 réponses
liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
Tableau croisé dynamique avec plusieurs en-têtes identiques
RisingStar84 -
danielc0 -

1 réponse