afficher des colonnes supplémentaires à un tableau

Version imprimable

28/09/2009, 15h45
Hallewest

afficher des colonnes supplémentaires à un tableau
Bonjour,

J'ai un tableau qui a de nombreuses colonnes. Dans son état initial, je souhaiterais que certaines colonnes
soient cachées, et que lorsque je clique sur un bouton, toutes les colonnes s'affichent (le tout en javascript).

Sachant qu'il y a plusieurs cases à cacher, je ne peux pas leurs donner un id, je leurs donne donc un name commun.

sur le bouton qui sert a afficher toutes les cases, je met un onclick, qui appelle la fonction showall();
Code:

1 2 3 4 5 6 7 8 9 function showall() { var compt=document.getElementsByTagName("hidden").length; for(i=0;i<compt;i++) { document.getElementsByTagName("hidden")[i].style.display = 'inline'; } }
Cela ne fonctionne pas. J'ai du mal à voir d'ou vient le problème.
Je remercie les personnes qui trouverons le temps de m'aider.
28/09/2009, 15h53
Bovino

Code:

var compt=document.getElementsByTagName("hidden").length;

Il n'existe pas de tag HTML hidden :roll:
Peut-être devrais-tu faire :

Code:

var compt=document.getElementsByName("hidden").length;
28/09/2009, 16h11
Hallewest

J'ai changé, mais le problème est toujours la.
28/09/2009, 16h32
Hallewest

Au temps pour moi, le problème est résolu. Enfin...déplacé :)

En fait j'avais aussi changé le 'inline' par 'table-column|table-column-group', car lorsque je met inline (ou block) le tableau s'affiche de façon assez peu académique.

Mais il ne se passe rien lorsque je met display='table-column|table-column-group' avec javascript.

Je vais essayer avec toutes les propriétés possibles de display, j'espere qu'il y en aura au moins une qui marchera.
28/09/2009, 16h42
Hallewest

Ca marche sur Firefox avec :

Code:

document.getElementsByName("hidden")[i].style.display = 'table-cell';

Mais malheuresement, rien ne se passe sous IE... Existe -t-il des solutions connues?
28/09/2009, 17h22
Bovino

Oui, si tu ne précises pas de valeur, c'est celle par défaut qui est appliquée :

Code:

document.getElementsByName("hidden")[i].style.display = '';

Attention toutefois, si un style a été défini dans une feuille de style, c'est celui-ci qui est considéré comme le style par défaut !
29/09/2009, 10h54
Hallewest

En mettant

Code:

document.getElementsByTagName("hidden")[i].style.display = '';

, les colonnes supplémentaires ne s'affichent pas lorsque j'apelle la fonction.

En mettant display=inline, l'affichage est inadapté, pareil pour block, inline-block...

J'aimerai éviter un rechargement de page (repasser au "tout php"), mais j'ai peur de ne pas avoir le choix.
29/09/2009, 13h10
Bovino
Oui, j'imagine que si ta classe s'appelle hidden, c'est qu'elle est masquée par défaut :mrgreen:
Du coup, tu rentres dans ce cas de figure :

Citation:

Attention toutefois, si un style a été défini dans une feuille de style, c'est celui-ci qui est considéré comme le style par défaut !

Il existe plusieurs solutions :
- Tu supprimes le display none du CSS et tu masques les éléments sur le onload de la page, inconvénient, tant que la page n'est pas chargée, tes éléments sont visibles
- Tu supprimes le display none du CSS et tu l'intègre inline dans l'attribut style des balises, inconvénient, c'est pas vraiment unobstrusive
- Tu affectes en CSS le display none via une autre classe, dans ton code, tu affectes 2 classes à tes éléments hidden, au chargement, tu attribues dynamiquement le display none à ta 1re classe puis tu supprimes la seconde.

Je ne peux pas mettre de onload sur la balise body de la page, car cette balise est commune à toutes les pages du site.

J'ai donc essayé ta deuxième solution:

Elle présente l'avantage de fonctionner sans le "table-cell", mais j'ai toujours le même problème sur IE (v8), lorsque je clique sur le bouton, rien ne se passe.

Voici un extrait simplifié de mon code:

la page avec le tableau:

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
25
26
27
28
29
30
31
32
<input type="button" value=">>> Voir tout" id="tab" onclick="tab();"/>
 
<table>
	<tr>
 
		<th colspan="2">col1 visible</th>
 
		<th name="hidden_field" colspan="1" style="display: none;">col 1 cachée</th>
		<th name="hidden_field" colspan="2" style="display: none;">col 2 cachée</th>
		<th name="hidden_field" colspan="1" style="display: none;">col 3 cachée</th>
		<th name="hidden_field" colspan="2" style="display: none;">col 4 cachée</th>	
 
		<th colspan="1">col 2 visible</th>				
		<th colspan="2">col3 visible</th>				
	</tr>
 
	<tr>
	        <td style="background-color:$row2[color];">1.1</td>
		<td style="background-color:$row2[color];">1.2</td>
 
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.3</td>
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.4</td>
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.5</td>
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.6</td>
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.7</td>
		<td name="hidden_field" style="display: none; background-color:$row2[color];">1.8</td>
 
		<td style="background-color:$row2[color];">1.9</td>
		<td style="background-color:$row2[color];">1.10</td>
	</tr>
 
</table>

Et ma fonction tab:

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
25
26
27
28
function tab()
{
	var compt=document.getElementsByName("hidden_field").length;
 
	if (document.getElementById('tab').value==">>> Voir tout")
	{
		for(i=0;i<compt;i++)
		{
			document.getElementsByName("hidden_field")[i].style.display = '';
			//$("td[name=hidden_field]").show();
 
		}
 
		document.getElementById('tab').value="<<< Cacher les colonnes annexes";
	}
 
	else if (document.getElementById('tab').value=="<<< Cacher les colonnes annexes")
	{
		for(i=0;i<compt;i++)
		{
			//$("td[name=hidden_field]").hide();
			document.getElementsByName("hidden_field")[i].style.display = 'none';
		}
 
		document.getElementById('tab').value=">>> Voir tout";
	}
 
}

J'ai commenté mes essais en jquerry. (infructueux car je ne sais pas comment selectionner des éléments par leur "name" en jquerry)

Finalement, le problème ne semble pas venir du display, mais de la fonction getElementByname() qui n'est pas reconnue sous IE... (en tout cas dans ma version).

Je ne peut pourtant pas remplacer mes name par des id, sachant que j'aurais alors plusieurs fois le même id.

Voyez vous une solution intéressante à mettre en place?

Donner des id différents a chaque td est impossible (ou très fastidieux) dans mon cas.

Le problème semble récurrent, et il est souvent proposé aux personnes rencontrant ce problème d'utiliser la fonction suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function getElementsByName_iefix(tag, name) { var elem = document.getElementsByTagName(tag); var arr = new Array(); for(i = 0,iarr = 0; i < elem.length; i++) { att = elem[i].getAttribute("name"); if(att == name) { arr[iarr] = elem[i]; iarr++; } } return arr; }
Seulement voila, dans ma fonction tab, j'arrive à récupérer la variable compt, mais lorsque je passe la ligne du display, la fonction semble s'arrêter. (l'alert "display" n'est pas affiché).
D'ou vient mon problème?
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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 function tab() { var compt_th=getElementsByName_iefix('th','hidden_field').length; var compt_td=getElementsByName_iefix('td','hidden_field').length; var compt=compt_th+compt_td; alert(compt); if (document.getElementById('tab').value==">>> Display the detailed tab") { for(i=0;i<compt_th;i++) { getElementsByName_iefix('th','hidden_field')[i].style.display = ''; alert('display'); } for(j=0;j<compt_td;j++) { getElementsByName_iefix('td','hidden_field')[j].style.display = ''; } document.getElementById('tab').value="<<< Display the simplifiled tab"; } else if (document.getElementById('tab').value=="<<< Display the simplifiled tab") { for(i=0;i<compt_th;i++) { getElementsByName_iefix('th','hidden_field')[i].style.display = 'none'; } for(j=0;j<compt_td;j++) { getElementsByName_iefix('td','hidden_field')[j].style.display = 'none'; } document.getElementById('tab').value=">>> Display the detailed tab"; } }
Est ce que le problème vient du [i] de getElementsByName_iefix('th','hidden_field')[i]?
La fonction getElementsByName_iefix renvoie pourtant bien un array.