Résolu Cacher/afficher colonne de tableau Résolu

Hello,

Newbie que je suis je suis à la recherche de la bonne méthode pour afficher/cacher certaines colonnes d'un tableau (sans reloader la page).
J'ai tenté en javascript.. mais sans grand succès (j'arrive à vider le contenu des cellules mais pas faire de colllapse à proprement dit).

Alors bin je me suis dit pourquoi pas en css... : j'arrive à cacher/afficher des lignes mais pour les colonnes c'est malheureusement au dela de les compétentes ?? help !!

(RQ : ce tableau est généré en php/mysql.)

voili je suis prenant pour toute idée d'avance merci pour votre prose-url-conseils-idées-scripts!

H

Bonjour et bienvenue hdh

Que contient ton tableau ?
Des données tabulaires ou la déco de la page ?

Hello,
Merci pr l'accueuil
Que du contenu txt (+liens).. actuellement en table tr td (honte à moi) (fabriqué via une boucle php) mais ne connaissant pas grand chose en css2.... je preferais passer par cette méthode ! mais je suis à l'écoute pour passer au css-total-look !!
Ca te parrait gerable ??

dominique a écrit :
Bonjour et bienvenue hdh

Que contient ton tableau ?
Des données tabulaires ou la déco de la page ?

Si c'est du vrai contenu qui a sa place dans un tableau, il faut le laisser.
Là c'est à toi de juger ou montre nous un exemple du contenu qu'il contient

Sinon, pour supprimer des cellules, tu peux gérer ça en récupérant le numéro de la colone à supprimer et ensuite, pour chaque ligne (boucle for) tu fais sauter la cellule (td) de telle numéro (td[X])

Voilà en gros pour la démarche, je vais pas plus loin, j'aimerai en savoir plus sur le contenu pour pas qu'on se casse la tête à faire un script pour rien et surtout pourquoi c'est faire ce masquage

...et on ne se moque pas du contenu du site

Voila c'est le type de tableau que je voudrais pouvoir retravailler sans reload de page :
http://www.7rla.com/div/type.php

Ce tableau n'est pas trop complexe (3colonnes) .. mais d'autres feront 4 ou 5 colonnes de plus... alors pour les 800*600 c'est pas agréable !

Vous en pensez quoi ?? une fois de plus si vous pensez que la méthode 100% css permettrait d'atteindre mon but... je serai tout content !!

a+

H

Olivier a écrit :
Si c'est du vrai contenu qui a sa place dans un tableau, il faut le laisser.
Là c'est à toi de juger ou montre nous un exemple du contenu qu'il contient

Sinon, pour supprimer des cellules, tu peux gérer ça en récupérant le numéro de la colone à supprimer et ensuite, pour chaque ligne (boucle for) tu fais sauter la cellule (td) de telle numéro (td[X])

Voilà en gros pour la démarche, je vais pas plus loin, j'aimerai en savoir plus sur le contenu pour pas qu'on se casse la tête à faire un script pour rien et surtout pourquoi c'est faire ce masquage

Le tableau semble tout à fait indiqué pour contenir ce type d'informations.

Après, je me pose des questions sur le "pourquoi" supprimer des colones ?

Merci pour ta remarque de l'ordre "ergonomique".... mais la réponse que j'attendais était plus de l'ordre "technique"
(à lire avec une pincée d'humour)


en effet quand l'internaute se logge dans mon site et tombe nez à nez avec un gros tableau avec 10 colonnes il n'arrive pas à avoir une vision d'ensemble : je voudrais pour voir
possibilité d'afficher ou non certains contenus
comme dans http://css.alsacreations.com/modelesmenus/vd1.htm
mais à l'horizontal quoi !

Vous en pensez quoi vous qui connaissez le css2 ??

encore merci de te pencher sur mon pb !
a+
H

Olivier a écrit :
Le tableau semble tout à fait indiqué pour contenir ce type d'informations.

Après, je me pose des questions sur le "pourquoi" supprimer des colones ?

J'ai un peu de mal à cerner le truc

J'essai de te faire un exemple ce soir ou demain (ou un autre jour ) et tu me diras si c'est bien ça.

Olivier a écrit :
J'ai un peu de mal à cerner le truc

J'essai de te faire un exemple ce soir ou demain (ou un autre jour ) et tu me diras si c'est bien ça.

Désolé si j'arrive pas à me faire comprendre....

voila mon tableau d'origine

--------------------------
| a | b | c | d |
--------------------------
| 01 | 02 | 03 | 04 |
--------------------------
| 01 | 02 | 03 | 04 |
--------------------------

Je voudrais pouvoir en cliquant sur la "b" que la colonne des 02 disparaisse.

--------------------
| a | c | d |
--------------------
| 01 | 03 | 04 |
-------------------
| 01 | 03 | 04 |
-------------------

euh... je suis plus clair là ??

merci encore pr ton coup de main !!

H

Wé c'est bien ce que j'avais compris

Donc, j'essairai de te faire un truc de ce style.

Mais je vois pas trop l'interêt
S'il y a possibilité de supprimer une colone c'est qu'elle ne sert à rien nan ?
Et après, on fait comment pour la réinitialiser ?

Salut !
ai commencé à creuser un peu la question... mais j'avoue pédaller dans la choucroute...
le calque apparait bien... mais bon.. pas au bon endroit et avec une précision 'qui laisse à désirer'...
Tu en penses quoi ? ca te parrait une bonne méthode (la plus adaptée ??)
Sachant que ce type de template html est ingérable en php/mysql pour la mise en form (boucle horizontale et non verticale)

pr voir le code :
http://www.7rla.com/div/css2.htm

Olivier a écrit :
Wé c'est bien ce que j'avais compris

Donc, j'essairai de te faire un truc de ce style.

Mais je vois pas trop l'interêt
S'il y a possibilité de supprimer une colone c'est qu'elle ne sert à rien nan ?
Et après, on fait comment pour la réinitialiser ?

Bonjour,
j'ai personnellement eu aussi de gros tableaux à gérer ; quand j'ai vu la largeur que je pouvais atteindre pour une ligne (tableau d'adresses décomposées Nom / Rue / code postal / Ville /...), j'ai en fait pris le parti d'utiliser des listes imbriquées : avantage : les indentations me permettent la même hiérarchisation que les colonnes.
Allègement du code (<ul><li></li></ul> versus <table><tr><td></td><td></td></tr></table>).
Repérage des éléments <li> par classe ou id, donc plus facilement repérable pour l'application que tu veux faire ensuite...

euh la pour le coup c'est à moi de ne pas comprendre !
tu pourrais me donner une url ou consulter cette solution !
en tt cas merci pr ton idée !!
H

Macpom a écrit :
Bonjour,
j'ai personnellement eu aussi de gros tableaux à gérer ; quand j'ai vu la largeur que je pouvais atteindre pour une ligne (tableau d'adresses décomposées Nom / Rue / code postal / Ville /...), j'ai en fait pris le parti d'utiliser des listes imbriquées : avantage : les indentations me permettent la même hiérarchisation que les colonnes.
Allègement du code (<ul><li></li></ul> versus <table><tr><td></td><td></td></tr></table>).
Repérage des éléments <li> par classe ou id, donc plus facilement repérable pour l'application que tu veux faire ensuite...

euh... Bon :
exemple de liste à la place d'un très gros et long tableau

imaginons que ton tableau est de la structure suivante :

<table id="tbl">
   <thead>
       <tr>
            <th class="col1">Colonne1</th>
            <th class="col2">Colonne2</th>
            <th class="col3">Colonne3</th>
      </tr>
    </thead>
    <tbody>
       <tr>
            <td class="col1">Colonne1 - cell1</td>
            <td class="col2">Colonne2 - cell1</td>
            <td class="col3">Colonne3 - cell1</td>
      </tr>
       <tr>
            <td class="col1">Colonne1 - cell2</td>
            <td class="col2">Colonne2 - cell2</td>
            <td class="col3">Colonne3 - cell2</td>
      </tr>
    </tbody>
</table>

(en esperant ne pas me tromper dans mon tableau , j'en fait tellement rarement :$ )

Ensuite tu n'auras "plus qu'a" cacher les cellules ayant pour class="coln"

par exemple

<a href="#" onclick="cacher('col2')" title="cliquer pour cacher la colonne N°2">cacher la colonne 2</a>

ensuite une simple fonction js

 
function cacher(coll)
{
	var elmt = document.getElementById('tbl'); 
	var cells = elmt.getelementsByTagName('TD'); 
	for (i=0; i > cells.length; i++) 
	{
		if (cells[ i ].className == coll)
		{
			cells[ i ].style.display = 'none';
		}
	}
}

bien sur le bout de code en javascript, il faudrais bien sur le completer, pouvoir sur le click du lien rafficher la colonne, et aussi gerer les cellules d'en tete (<th>)

En tout cas moi c'est comme ca que je partirais

Si tu dois economiser le nombre d'octet tu pourrais supprimer les class="coll1" sur chaque cellule en faisant un gros traitement par js, mais ce serait je pense beaucoup se compliqué

EDIT :
tout mon code est plus indenté
Modifié par CyrilCS (19 Jun 2005 - 15:38)

Salut et merci pr ton aide !
C'est en effet ce que je cherchais ...sans malheureusement en connaitre la méthode !
Je viens de faire le test dans une page... et malheureusement il y a une chtite erreur javascript (mais ne perdons pas espoir : mieux vaut parfois une erreur js qu'une abs totale de script !! )
Bref voila l'url en ligne
http://www.7rla.com/div/css2a.htm
Pourrais-tu me dire ce que tu en penses ??
( en tout cas pour ce qui est du code pr le tableau il est très bien fait si un jour tu en as marre du css2... tu peux te lancer ds ce bns vieux table-tr-td !!!!)
encore merci & a+
H




bien sur le bout de code en javascript, il faudrais bien sur le completer, pouvoir sur le click du lien rafficher la colonne, et aussi gerer les cellules d'en tete (<th>) En tout cas moi c'est comme ca que je partirais
=> exact c'est aussi un truc comme cela que j'imginais !

Si tu dois economiser le nombre d'octet tu pourrais supprimer les class="coll1" sur chaque cellule en faisant un gros traitement par js, mais ce serait je pense beaucoup se compliqué
=> euh.. je crois que je vais aller au plus simple !!

bouh que je suis vilain ....

getElementsByTagName

donc

 
function cacher(coll)
{
var elmt = document.getElementById('tbl');
var cells = elmt.get[b]E[/b]lementsByTagName('TD');
for (i=0; i > cells.length; i++)
{
if (cells[ i ].className == coll)
{
cells[ i ].style.display = 'none';
}
}
}

ensuite pour faire reaparaitre ta colonne je te laisse faire

hdh a écrit :

Si tu dois economiser le nombre d'octet tu pourrais supprimer les class="coll1" sur chaque cellule en faisant un gros traitement par js, mais ce serait je pense beaucoup se compliqué ravi
=> euh.. je crois que je vais aller au plus simple !!

Oui c'est sur que ca demanderais beaucoup d'effort pour finalement pas grand chose ... mais quand on a trés peu de bande passante, c'est quelques octets sont TRES précieux pour toi mais aussi pour le client si ta page est lourde
Modifié par CyrilCS (19 Jun 2005 - 17:22)

CyrilCS a écrit :
bouh que je suis vilain ....

bin moi je trouve pas !!
... je dirai un peu le contraire..
moi de mon côté... je me trouve pas glop : 'ca marche pas plus avec ce changement'

CyrilCS a écrit :
ensuite pour faire reaparaitre ta colonne je te laisse faire

je m'y mettrai quand j'arriverai à la faire disparaitre
ok ok elle était facile !!

... en tout cas désolé de te pourrir ton temps avec mes questions :
le code est plus que jamais visible ici
http://www.7rla.com/div/css2a.htm

si tu peux jeter un coup d'oeil et me dire ce que tu en penses ce serait tiptopcool !!
a+
H

euh si ca peut aider sur netscape en debug j'ai "JavaScript Error: ttp://www.7rla.com/div/css2a.htm, line 13: document.getElementById is not a function."

2 erreurs pour un script aussi simple que ca, j'ai vraiment besoin de vacances, l'excuse : il est dimanche

function cacher(coll)
{
var elmt = document.getElementById('tbl');
var cells = elmt.getElementsByTagName('TD');
for (i=0; i [b]<[/b] cells.length; i++)
{
if (cells[ i ].className == coll)
{
cells[ i ].style.display = 'none';
}
}
}

avec le > dans le bon sens voila qui est mieux

Cette fois j'ai pris le temps de tester avant de t'envoyer le code et comme j'avais un fichier d'ouvert je suis allé un peu plus loin

 
<script language="javascript">

function cacher(coll)
{
	var elmt = document.getElementById('tbl');
	var elmtsCellule = 'th|td'.split('|');
	for(j=0; j < elmtsCellule.length; j++)
	{
		var cells = elmt.getElementsByTagName(elmtsCellule[ j]);
		for (i=0; i < cells.length; i++)
			if (cells[ i ].className == coll)
				if (cells[ i ].style.display != 'none')
					cells[ i ].style.display = 'none';
				else
					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}
	}
}
</script>

<table id="tbl" border="1">
<thead>
<tr>
<th class="col1">Colonne1</th>
<th class="col2">Colonne2</th>
<th class="col3">Colonne3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Colonne1 - cell1</td>
<td class="col2">Colonne2 - cell1</td>
<td class="col3">Colonne3 - cell1</td>
</tr>
<tr>
<td class="col1">Colonne1 - cell2</td>
<td class="col2">Colonne2 - cell2</td>
<td class="col3">Colonne3 - cell2</td>
</tr>
</tbody>
</table>

<a href="#" onclick="cacher('col2')" title="cliquer pour cacher la colonne N°2">cacher la colonne 2</a>

j'espere que cette fois le code sera indenté sinon tu vas te tirer les cheveux pour comprendre :q

t'as peut etre besoin d'une explication pour ca

					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}

en fait, j'essaye de mettre la cellule avec un display:table-cell c'est ce qu'il faudrais en théorie mais IE ne gere pas ce display, et la étonement il plante quand j'essaye de lui mettre ca, donc pas besoin de script de detection & co, si le truc plante, on lui met un display:block avec cette astuce ton script continuera a fonctionner meme avec IE7

Hello,
Siouperbe !j'étais moi aussi entrain d'essayer de trouver le prq du comment... et en regardant sur google je suis tombé sur un bout de code et voila t-y pas que nous qui partions à la chasse à l'octet ils me montrent pas comment gagner une ligne (tu as bien entendu 'une ligne')
c'est y pas génial...

var cells = document.getElementById('tbl').getElementsByTagName('TD');
(révolutionnaire comme idée non ?? )

Pour ce qui est de ton excuse 'dimanche'... je ne sais pas quel tps il fait chez toi mais à Paris c'est la cagnasse... donc l'excuse temperature trop élevée est tout aussi acceptable !

En tout cas merci pour le bout de code : je ne connaissais pas le getElementsByTagName et consor... j'en prends bonne note !

Maintenant que le bout de code on va pouvoir partir en we pas vrai ???

encore merci pr ton aide... je publierai ici le code finalisé bientot !

a+

H

CyrilCS a écrit :
2 erreurs pour un script aussi simple que ca, j'ai vraiment besoin de vacances, l'excuse : il est dimanche

function cacher(coll)
{
var elmt = document.getElementById('tbl');
var cells = elmt.getElementsByTagName('TD');
for (i=0; i [b]<[/b] cells.length; i++)
{
if (cells[ i ].className == coll)
{
cells[ i ].style.display = 'none';
}
}
}

avec le > dans le bon sens voila qui est mieux

Cette fois j'ai pris le temps de tester avant de t'envoyer le code et comme j'avais un fichier d'ouvert je suis allé un peu plus loin

 
<script language="javascript">

function cacher(coll)
{
	var elmt = document.getElementById('tbl');
	var elmtsCellule = 'th|td'.split('|');
	for(j=0; j < elmtsCellule.length; j++)
	{
		var cells = elmt.getElementsByTagName(elmtsCellule[ j]);
		for (i=0; i < cells.length; i++)
			if (cells[ i ].className == coll)
				if (cells[ i ].style.display != 'none')
					cells[ i ].style.display = 'none';
				else
					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}
	}
}
</script>

<table id="tbl" border="1">
<thead>
<tr>
<th class="col1">Colonne1</th>
<th class="col2">Colonne2</th>
<th class="col3">Colonne3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Colonne1 - cell1</td>
<td class="col2">Colonne2 - cell1</td>
<td class="col3">Colonne3 - cell1</td>
</tr>
<tr>
<td class="col1">Colonne1 - cell2</td>
<td class="col2">Colonne2 - cell2</td>
<td class="col3">Colonne3 - cell2</td>
</tr>
</tbody>
</table>

<a href="#" onclick="cacher('col2')" title="cliquer pour cacher la colonne N°2">cacher la colonne 2</a>

j'espere que cette fois le code sera indenté sinon tu vas te tirer les cheveux pour comprendre :q

t'as peut etre besoin d'une explication pour ca

					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}

en fait, j'essaye de mettre la cellule avec un display:table-cell c'est ce qu'il faudrais en théorie mais IE ne gere pas ce display, et la étonement il plante quand j'essaye de lui mettre ca, donc pas besoin de script de detection & co, si le truc plante, on lui met un display:block avec cette astuce ton script continuera a fonctionner meme avec IE7