Cacher une colonne de tableau avec JavaScript et balise DIV

27 déc. 2006, 12:44

Bonjour,

j'ai une petite question à vous soumettre concernant du JavaSript et de l'HTML.
Je voudrais afficher un tableau avec le resultat d'une requête (ce que je fais déjà très bien) mais je souhaiterais donner le choix aux utilisateurs d'afficher ou pas une colonne. Je voudrais que ce processus se fasse sans un nouveau reqêtage car c'est très lourd.

je pensais à utiliser des balises <DIV> et à les afficher ou pas avec "Display : hidden" ou "Display : none" ...

Je comptais mettre des balises <DIV> dans toutes les cellules du tableau, leur donner comme nom "1,*" pour la première colonne "2,*" pour la deuxieme colonne (le * étant le numéro de ligne). Lorsque je veux cacher une colonne, je cache toute les cellules qui ont pour colonne "3,*"

je ne sais pas si c'est la meilleur solution ? Si vous pensez que la solution n'est pas mauvaise (ou si vous en avez une meilleur), quel serait la moulinette JavaScript pour faire tourner tout cela ???

merci à tous !

27 déc. 2006, 14:29

Est ce qye quelqu'un aurait une idée pour moi ... please !!!

27 déc. 2006, 15:25

Modération :
Ish, les "up" sont interdits sur PHPFrance.

Si tu n'as pas obtenu de réponse, c'est (au choix) :
- que ta question est mal formulée : reformule-la différemment ;
- que personne ne connaît la réponse ici : faire un "up" ne te donnera pas davantage de résultats ;
- que la réponse demandée exige un travail important que personne ne va faire à ta place ;
- que trop peu de temps s'est écoulé depuis ton précédent message pour qu'un membre ait pu y répondre.

Merci de prendre le temps de lire les règlements.

27 déc. 2006, 16:13

Pas de problème Albat ...

Donc je résume en plus condensé car j'ai réussi à mettre une balise <DIV> dans chaque cellules de mon tableau de résultat. J'ai aussi donnée un nom à chacune d'entre elle. La première en haut à gauche est 1.1, puis 2.1 pour la cellule de la deuxième colonne de la 1er ligne, etc ....

maintenant ce que je voudrais savoir, c'est quel moulinette en JavaScript je dois mettre en place pour affecter à toutes les cellules qui ont pour name=2.*, la valeur "style='display:none' "

En fait, c'est surtout car je ne sais pas comment faire la recherche par rapport au nom des cellues et dire prend toutes les cellules qui commence par 2.* et met leur la valeur "style ... "

merci .... j'espère vous avoir un plus éclairer !!!

27 déc. 2006, 16:20

et si tu donnais simplement une classe à tes cellules ?...

// ...
<style type="text/css">
.magique { display:none ; }
</style>
</head>

<body>
<table>
<tr><td>L1 C1</td>
    <td class="magique">L1 C2</td>
    <td>L1 C3</td></tr>
<tr><td>L2 C1</td>
    <td class="magique">L2 C2</td>
    <td>L2 C3</td></tr>
</table>
</body>

27 déc. 2006, 16:30

mais ta solution ne marche que pour la deuxieme colonne ... alors que j'aimerais mettre un bouton en entête de colonne pour donner le choix à l'utilisateur de cacher.

Pour montrer il y aura autre chose !! mais ce n'est pas au programme !!

27 déc. 2006, 16:35

Bonjour,

Regarde du coté de "getElementByName()"

27 déc. 2006, 17:03

ok ...

Mais je fais une recherche dans un formulaire avec document.getElementsByName() ??

et quand je fais la recherche, je fais sur document.getElementsByName(2.*)

27 déc. 2006, 17:24

Re,
Ça va te retourner un tableau.
Tu devras parcourir ce tableau et pour chaque élément de ce tableau avec un substr() récupérer la partie du nom qui t'intéresse et voir si le nom correspond.

Si c'est le cas tu fais ton traitement.
Joue sur l'opérateur ternaire pour que en une seule opération tu puisse faire cacher et afficher.
QQ chose du style

Code : Tout sélectionner

elem.style.visibility = (elem.style.visibility == 'visible' ? 'hidden' : 'visible');

27 déc. 2006, 17:27

ok merci ... c'est le "substr() " que je cherchais pour pouvoir faire ma recherche dans le tableau !!!

Je vais voir ça ... et je rendrais ma conclusion plus tard !!!

28 déc. 2006, 12:46

Personnellement je trouve que tu te complique énormement pour ce que tu veux faire.
Je viens de tester un truc et apparement ca marche tres bien et cela semble faire ce que tu demande:

Code : Tout sélectionner

<html>
	<head>
	<title>affchage / masquage d'une colonne de tableau</title>
	<style>
		table{
			border-right:1px solid #999;
			border-top:1px solid #999;
			text-align:center;
		}
		
		thead, tfoot{
			background-color:#ff9;
		}
		
		td, th{
			border-left:1px solid #999;
			border-bottom:1px solid #999;
		}
		
		thead td{
			cursor:pointer;
		}
		
	</style>
	<script>
		function modif_col(texte, col){
			var corps=document.getElementsByTagName("tbody")[0];
			var tr= corps.getElementsByTagName('tr');

			if(texte=="masque"){
				document.getElementsByTagName("th")[col-1].style.display="none";
				for(var i=0;i<tr.length;i++){
					tr[i].getElementsByTagName("td")[col-1].style.display="none";
				}
				document.getElementsByTagName("td")[0].title="affiche";
			}
			else{
				document.getElementsByTagName("th")[col-1].style.display="";
				for(var i=0;i<tr.length;i++){
					tr[i].getElementsByTagName("td")[col-1].style.display="";
				}
				document.getElementsByTagName("td")[0].title="masque";
			}
		}
	</script>
	</head>
	<body>

		<table cellspacing="0">
			<thead>
				<tr>
					<td colspan="3" onclick="modif_col(this.title, 2);" title="masque">masque/affiche</td>
				</tr>
				<tr>
					<th id="col1">col 1</th>
					<th id="col2">col 2</th>
					<th id="col3">col 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td headers="col1">line 1 / col 1</td>
					<td headers="col2">line 1 / col 2</td>
					<td headers="col3">line 1 / col 3</td>
				</tr>
				<tr>
					<td headers="col1">line 2 / col 1</td>
					<td headers="col2">line 2 / col 2</td>
					<td headers="col3">line 2 / col 3</td>
				</tr>
				<tr>
					<td headers="col1">line 3 / col 1</td>
					<td headers="col2">line 3 / col 2</td>
					<td headers="col3">line 3 / col 3</td>
				</tr>
				<tr>
					<td headers="col1">line 4 / col 1</td>
					<td headers="col2">line 4 / col 2</td>
					<td headers="col3">line 4 / col 3</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3">pied</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

Teste le et dis moi si ca ressemble à ce que tu souhaitais

28 déc. 2006, 14:30

Pas mal du tout .... c'est intéressant ...
Ton idée est pas mal ... j'avais fait un truc qui marchait aussi ..
Je finie et je vous met les deux codes !!!

03 janv. 2007, 15:42

Bonjour à tous,

je reviens après une semaine de vacance et j'ai travailler ce matin sur mon probleme. La solution est pas mal mais j'ai un petit probleme puisqu'il n'y a que l'entête du tableau qui se masque. Et lorsque je clique sur la première colonne, je me rend compte que la première colonne d'un autre tableau se masque aussi.

voici mon code : il est au format HTML donc insérer le dans une page vierge pour voir le rendu !!

Code : Tout sélectionner

 <html>
  <head>
    <style> 
		thead td{
			cursor:pointer;
		}
	</style>
  <script type=text/JavaScript src=../../site.js></script>
  <script type="text/JavaScript">
   
    var name = navigator.appName ;
    if (name == 'Netscape') {
    document.write ('<link rel="stylesheet" href="../../style_nn.css" type="text/css">');
    } else if (name == 'Microsoft Internet Explorer') {
    document.write ('<link rel="stylesheet" href="../../style_ie.css" type="text/css">');
    } else if (name == 'Opera') {
    document.write ('<link rel="stylesheet" href="../../style_nn.css" type="text/css">');
    } else {
    document.write ('<link rel="stylesheet" href="../../style_ie.css" type="text/css">');
    }
	
	function modif_col(texte, col){
		var tr= document.getElementsByTagName("tbody")[0].getElementsByTagName('tr');

		if(texte=="masque"){
			document.getElementsByTagName("th")[col-1].style.display="none";
			for(var i=0;i<tr.length;i++){
				tr[i].getElementsByTagName("td")[col-1].style.display="none";
			}
			document.getElementsByTagName("td")[0].title="affiche";
		}
		else {
			document.getElementsByTagName("th")[col-1].style.display="";
			for(var i=0;i<tr.length;i++){
				tr[i].getElementsByTagName("td")[col-1].style.display="";
			}
			document.getElementsByTagName("td")[0].title="masque";
		}
	}
  </script>

  
  </head>
  <body>
	<script src=../../script/ecw/ecw.js></script>
	<script>
		ecwInit= function() { tui=new ECW.UI("res"); } 
	</script>
		<form name="res" id="res" method=GET action="Resultats.php">
			<input type=hidden name=racine id=racine value=../../>
				<fieldset style=padding:1;> <legend>Informations</legend>
					<table border=0 width=100%cellpadding=0 cellspacing=3>
						<tr>
							<td align=left><font face="tahoma" size=2 color=red><b>Trop de données, ..</B></font></td>
							<td align=right><font face=tahoma size=2><b>Total expressions de besoin affichées</b></font></td>
							<td width=100 align=center bgcolor=#5E6A46><font face=tahoma color=white size=2 > 00,00 &#x20AC;</font></td>
						</tr>
					</table>
					<center>
					<select name="affichage">
						<OPTION onclick="modif_col(this.title, 1);" title="affiche">Besoin</OPTION>
						<OPTION onclick="modif_col(this.title, 2);" title="affiche">N° Ordre</OPTION>
						<OPTION onclick="modif_col(this.title, 3);" title="affiche">Article</OPTION>
						<OPTION onclick="modif_col(this.title, 4);" title="affiche">Maint.</OPTION>
						<OPTION onclick="modif_col(this.title, 5);" title="affiche">Emetteur</OPTION>
						<OPTION onclick="modif_col(this.title, 6);" title="affiche">Qté</OPTION>
						<OPTION onclick="modif_col(this.title, 7);" title="affiche">Etat</OPTION>
						<OPTION onclick="modif_col(this.title, 8);" title="affiche">Date formulaire</OPTION>
						<OPTION onclick="modif_col(this.title, 9);" title="affiche">Date échéance</OPTION>
						<OPTION onclick="modif_col(this.title, 10);" title="affiche">CA</OPTION>
						<OPTION onclick="modif_col(this.title, 11);" title="affiche">Prix</OPTION>
						<OPTION onclick="modif_col(this.title, 12);" title="affiche">Cout Total</OPTION>
					</select></center>
				</fieldset>
		</form>
		<center><table width=100% frame=box rules=rows bordercolor=white cellpadding=2 cellspacing=3>
<thead>
<tr bgcolor=#5E6A46>
	<th id="col1" align=center onclick="modif_col(this.title, 1);" bgcolor=green title="masque"><b><font color=white style="font-size: 8pt">Besain</font></b></th>
	<th id="col2" align=center onclick="modif_col(this.title, 2);" title="masque"><b><font color=white style="font-size: 8pt">N°<br/>ordre</font></b></th>
	<th id="col3" align=center onclick="modif_col(this.title, 3);" title="masque"><b><font color=white style="font-size: 8pt">Article</font></b></th>
	<th id="col4" align=center onclick="modif_col(this.title, 4);" title="masque"><b><font color=white style="font-size: 8pt">Maint.</font></b></th>
	<th id="col5" align=center onclick="modif_col(this.title, 5);" title="masque"><b><font color=white style="font-size: 8pt">Emetteur</font></b></th>
	<th id="col6" align=center onclick="modif_col(this.title, 6);" title="masque"><b><font color=white style="font-size: 8pt">Qté</font></b></th>
	<th id="col7" align=center onclick="modif_col(this.title, 7);" title="masque"><b><font color=white style="font-size: 8pt">Etat</font></b></th>
	<th id="col8" align=center onclick="modif_col(this.title, 8);" title="masque"><b><font color=white style="font-size: 8pt">Date formulation</font></b></th>
	<th id="col9" align=center onclick="modif_col(this.title, 9);" title="masque"><b><font color=white style="font-size: 8pt">Date échéance</font></b></th>
	<th id="col10" align=center onclick="modif_col(this.title, 10);" title="masque"><b><font color=white style="font-size: 8pt">CA</font></b></th>
	<th id="col11" align=center onclick="modif_col(this.title, 11);" title="masque"><b><font color=white style="font-size: 8pt">Prix</font></b></th>
	<th id="col12" align=center onclick="modif_col(this.title, 12);" title="masque"><b><font color=white style="font-size: 8pt">Coût total</font></b></th>
</tr>
</thead>

<tbody>
<tr bgcolor=#C7D1B3> 
	<td id="col1" align=left><font face=tahoma  style="font-size: 8pt">AVFABD1 ALVES 09</font></td>
	<td id="col2" align=center><font face=tahoma  style="font-size: 8pt">7</font></td>
	<td headers="col3"><font face=tahoma  style="font-size: 8pt">Z000283863</font></td>
	<td headers="col4" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col5" align=center><font face=tahoma  style="font-size: 8pt">C322103</font></td>
	<td headers="col6" align=center><font face=tahoma  style="font-size: 8pt">1</font></td>
	<td headers="col7" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col8" align=center><font face=tahoma  style="font-size: 8pt">17/10/06</font></td>
	<td headers="col9" align=center><font face=tahoma  style="font-size: 8pt">17/10/06</font></td>
	<td headers="col10" align=center><font face=tahoma  style="font-size: 8pt">X1B03</font></td>
	<td headers="col11" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
	<td headers="col12" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
</tr>
<tr>
	<td id="col1" align=left><font face=tahoma  style="font-size: 8pt">AVFABD1 ALVES 09</font></td>
	<td id="col2" align=center><font face=tahoma  style="font-size: 8pt">8</font></td>
	<td headers="col3"><font face=tahoma  style="font-size: 8pt">B939W51147</font></td>
	<td headers="col4" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col5" align=center><font face=tahoma  style="font-size: 8pt">C322103</font></td>
	<td headers="col6" align=center><font face=tahoma  style="font-size: 8pt">500</font></td>
	<td headers="col7"><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col8" align=center><font face=tahoma  style="font-size: 8pt">30/11/06</font></td>
	<td headers="col9" align=center><font face=tahoma  style="font-size: 8pt">30/11/06</font></td>
	<td headers="col10" align=center ><font face=tahoma  style="font-size: 8pt">X1B03</font></td>
	<td headers="col11" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
	<td headers="col12" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
</tr>
<tr bgcolor=#C7D1B3> 
	<td id="col1" align=left><font face=tahoma  style="font-size: 8pt">AVFABD1 ALVES 09</font></td>
	<td id="col2" align=center><font face=tahoma  style="font-size: 8pt">9</font></td>
	<td headers="col3"><font face=tahoma  style="font-size: 8pt">Z000155674</font></td>
	<td headers="col4" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col5" align=center><font face=tahoma  style="font-size: 8pt">C322103</font></td>
	<td headers="col6" align=center><font face=tahoma  style="font-size: 8pt">12</font></td>
	<td headers="col7"><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col8" align=center><font face=tahoma  style="font-size: 8pt">30/11/06</font></td>
	<td headers="col9" align=center><font face=tahoma  style="font-size: 8pt">30/11/06</font></td>
	<td headers="col10" align=center ><font face=tahoma  style="font-size: 8pt">X1B03</font></td>
	<td headers="col11" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
	<td headers="col12" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
</tr>
<tr>
	<td id="col1" align=left><font face=tahoma  style="font-size: 8pt">AVFABD1 VERLAINE 09</font></td>
	<td id="col2" align=center><font face=tahoma  style="font-size: 8pt">3</font></td>
	<td headers="col3"><font face=tahoma  style="font-size: 8pt">T569920562</font></td>
	<td headers="col4" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col5" align=center><font face=tahoma  style="font-size: 8pt">C202305</font></td>
	<td headers="col6" align=center><font face=tahoma  style="font-size: 8pt">4</font></td>
	<td headers="col7"><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col8" align=center><font face=tahoma  style="font-size: 8pt">12/10/06</font></td>
	<td headers="col9" align=center><font face=tahoma  style="font-size: 8pt">12/10/06</font></td>
	<td headers="col10" align=center ><font face=tahoma  style="font-size: 8pt">X1B03</font></td>
	<td headers="col11" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
	<td headers="col12" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
</tr>
<tr bgcolor=#C7D1B3>
	<td id="col1" align=left><font face=tahoma  style="font-size: 8pt">AVFABD1 VERLAINE 09</font></td>
	<td id="col2" align=center><font face=tahoma  style="font-size: 8pt">4</font></td>
	<td headers="col3"><font face=tahoma  style="font-size: 8pt">X951506005</font></td>
	<td headers="col4" align=center><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col5" align=center><font face=tahoma  style="font-size: 8pt">C202305</font></td>
	<td headers="col6" align=center><font face=tahoma  style="font-size: 8pt">40</font></td>
	<td headers="col7"><font face=tahoma  style="font-size: 8pt"></font></td>
	<td headers="col8" align=center><font face=tahoma  style="font-size: 8pt">16/10/06</font></td>
	<td headers="col9" align=center><font face=tahoma  style="font-size: 8pt">16/10/06</font></td>
	<td headers="col10" align=center ><font face=tahoma  style="font-size: 8pt">X1B03</font></td>
	<td headers="col11" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
	<td headers="col12" align=center><font face=tahoma  style="font-size: 8pt">00,00</font></td>
</tr>

			   
</tbody></table><script>
  window.parent.ap_showWaitMessage('waitDiv', 0);
  var xmouse = 0;
  var ymouse = 0;
  if( document.layers )
      document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = ouEstSouris;

  function ouEstSouris( e )
	{
		if( document.all )
		{
			xmouse = document.body.scrollLeft + event.clientX;
			ymouse = document.body.scrollTop + event.clientY;
		}
		if( document.layers )
		{
			xmouse = e.pageX;
			ymouse = e.pageY;
		}
	}
  function afficherNom(photo)
  {
    if( document.layers )
      document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = ouEstSouris;
    document.getElementById('Fiche'+photo).style.left=xmouse;
    document.getElementById('Fiche'+photo).style.top=ymouse;
    document.getElementById('Fiche'+photo).style.visibility='visible';
  }
  function afficherNom2(photo)
  {
    if( document.layers )
      document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = ouEstSouris;
   document.getElementById('Arti'+photo).style.left=xmouse;
   document.getElementById('Arti'+photo).style.top=ymouse;
   document.getElementById('Arti'+photo).style.visibility='visible';
   }


  function effacerNom(photo)
  {
   document.getElementById('Fiche'+photo).style.visibility='hidden';

  }
  function effacerNom2(photo)
  {
    document.getElementById('Arti'+photo).style.visibility='hidden';
  }


</script>
  </body>
  </html>

d'après vous, d'ou viens le probleme ???

C'est le format HTML mais évidemment il y a une fonction en PHP derrière !!

03 janv. 2007, 16:28

Bon comme quoi, venir sur le forum porte conseil !!!

il faut mettre le nom du tableau comme je m'en doutais !!!! ... avec un "GetElementById" et l'id du tableau !!!

... résolu !!!

08 janv. 2007, 12:34

Bonjour à tous,

la fonction que j'ai mis en place fonctionne impécable. Lorsque l'on clique sur une colonne, elle disparait. Si on clique sur un champ de la liste déroulante, la colonne se réaffiche.

Néanmoins, il me reste un petit problème car tout cela fonctionne impécable sour FireFox mais pas sous IE. La colonne s'enleve bien quand je clique dessus mais elle ne se réaafiche pas quand je clique dans le menu déroulant !!

Pourquoi !! Avez-vous une idée ???

Cacher une colonne de tableau avec JavaScript et balise DIV

Qui est en ligne