Cacher une colonne de tableau avec JavaScript et balise DIV

par **Ish** » 09 janv. 2007, 14:38

C'était juste un problème de version d'IE ...

Tout est rentré dans l'ordre merci pour votre aide ...
et merci à Ryle, ça marche impécablement bien !!!

par **Ish** » 08 janv. 2007, 16:46

mon probleme peut venir de là ...

Je vais essayer comme ça mais je voudrais mettre un boutton au lien de cliquer sur l'entête de colonne, donc je vais voir si je peux pas faire autrement aussi !!

Et bien non Ryle ... ce n'est pas du tout ça !!

Cette solution impécable sous FireFox et pas sous IE !!!

par **Ish** » 08 janv. 2007, 13:55

mon probleme peut venir de là ...

Je vais essayer comme ça mais je voudrais mettre un boutton au lien de cliquer sur l'entête de colonne, donc je vais voir si je peux pas faire autrement aussi !!

par **Ryle** » 08 janv. 2007, 12:54

Au lieu d'un onClick sur l'option (je ne suis d'ailleurs pas certain que cet attribut soit autorisé ici) tu devrais ajouter l'attribut value à tes option et déclencher l'événement lors d'un onChange du select :

Code : Tout sélectionner

<select name="affichage" onChange="modif_col('affiche', this.options[this.selectedIndex].value);"> 
  <OPTION value="1">Besoin</OPTION> 
  ...
</select>

J'en ai profité pour virer le title et passer la valeur 'affiche' directement

par **Ish** » 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 ???

par **Ish** » 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 !!!

par **Ish** » 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 !!

par **Ish** » 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 !!!

par **falgan** » 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

par **Ish** » 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 !!!

par **Ajoloca** » 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');

par **Ish** » 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.*)

par **Ajoloca** » 27 déc. 2006, 16:35

Bonjour,

Regarde du coté de "getElementByName()"

par **Ish** » 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 !!

par **albat** » 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>

Cacher une colonne de tableau avec JavaScript et balise DIV

Répondre

Étendre la vue Revue du sujet : Cacher une colonne de tableau avec JavaScript et balise DIV