Afficher/masquer colonnes d'un tableau
Résolu
benf35
Messages postés
37
Date d'inscription
Statut
Membre
Dernière intervention
-
Popoï_ Messages postés 171 Date d'inscription Statut Membre Dernière intervention -
Popoï_ Messages postés 171 Date d'inscription Statut Membre Dernière intervention -
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 :)
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 :)
A voir également:
- Afficher/masquer colonnes d'un tableau
- Tableau word - Guide
- Trier un tableau excel - Guide
- Tableau ascii - Guide
- Formule moyenne excel plusieurs colonnes - Guide
- Comment faire des colonnes sur word - Guide
18 réponses
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.
http://www.siteduzero.com/tutoriel-3-8133-le-css-via-js.html
Tu dois pouvoir t'en sortir avec ça.
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 :-)
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 :-)
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.
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.
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
< 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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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?
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.
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.
Bon, je n'y arrive pas. La division ne veut pas se cacher. Voici mon code:
Rien qu'en faisant çà, le tableau s'affiche en entier, alors que le display vaut none.
<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.
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?
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?
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 ^^
.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 ^^
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.
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.
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.
<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.
Ah! pardon: tu parlais de COLONNES à faire disparaître!!!
Je vais penser un peu, puis quand j'aurais un truc: je poste
Je vais penser un peu, puis quand j'aurais un truc: je poste
Oui voilà, des colonnes:
En fait, du style là a peu près:
Seulement çà fonctionne pas (même en mettant l'id des th et des td différents)
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)
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.
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.
...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 :-(
É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 :-(