Discussion :

[Hallewest]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Hallewest]

J'ai changé, mais le problème est toujours la.

[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.

[Hallewest]

Ca marche sur Firefox avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais malheuresement, rien ne se passe sous IE... Existe -t-il des solutions connues?

[Bovino]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[Hallewest]

En mettant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

Oui, j'imagine que si ta classe s'appelle hidden, c'est qu'elle est masquée par défaut
Du coup, tu rentres dans ce cas de figure :

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.

[Hallewest]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[Hallewest]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.