Caché affiché du texte

par **Ryle** » 12 sept. 2006, 15:39

</tr> 
   <div onclick="afficher()" id="afficher">Afficher l'adresse</div>

Il ne faut rien mettre entre les lignes d'un tableau (enfin à part une autre ligne), c'est mal ! Pareil pour les trucs entre les cellules ou entre les lignes et les cellules soit dit en passant.

En revanche, pourquoi ne pas mettre tout ça directement dans le <tr> ?

Code : Tout sélectionner

<tr onclick="afficher()" id="afficher_1">
 <td>...</td>
</tr>

par **Snoops** » 05 avr. 2006, 17:52

Par contre un div caché dans une ligne de tableau, affiche quand même un espace vide non?
Non
Ça dépend de la méthode utilisée :
- Avec Visibility : hidden; l'espace sera vide dans les dimensions du bloc et laissera une place inoccuppée;
- Avec Display : none; rien n'apparaîtra du tout, pas même un espace.

Alors en fait, si la ligne caché fait parti d'un tableau créé avant le <div> caché, la ligne apparaitra quand même :

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
   if (document.getElementById("test").style.visibility=="hidden")
   {
      document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
      document.getElementById("test").style.visibility="visible";
   }
   else
   {
      document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
      document.getElementById("test").style.visibility="hidden";
   }
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
   <div onclick="afficher()" id="afficher">Afficher l'adresse</div>
   <div id="test" style="visibility: hidden">
		<tr>
			<td>77777777777777777777</td>
			<td>88888888888888888888</td>
			<td>99999999999999999999</td>
		</tr>
   </div>
<tr>
	<td>10</td>
	<td>11</td>
	<td>12</td>
</tr>
<tr>
	<td>13</td>
	<td>14</td>
	<td>15</td>
</tr>
</table>
</body>
</html>

Pas terrible ...

Même si l'on créer un tableau dans un tableau :

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
   if (document.getElementById("test").style.visibility=="hidden")
   {
      document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
      document.getElementById("test").style.visibility="visible";
   }
   else
   {
      document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
      document.getElementById("test").style.visibility="hidden";
   }
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
   <div onclick="afficher()" id="afficher">Afficher l'adresse</div>
   <div id="test" style="visibility: hidden">
	<table border="1">
		<tr>
			<td>77777777777777777777</td>
			<td>88888888888888888888</td>
			<td>99999999999999999999</td>
		</tr>
	</table>
   </div>
<tr>
	<td>10</td>
	<td>11</td>
	<td>12</td>
</tr>
<tr>
	<td>13</td>
	<td>14</td>
	<td>15</td>
</tr>
</table>
</body>
</html>

Pas terrible du tout !!!!

Pas contre si l'on créer un autre tableau le <div> est bien correctement caché puis affiché ... :

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function afficher()
{
   if (document.getElementById("test").style.visibility=="hidden")
   {
      document.getElementById('afficher').firstChild.nodeValue = "Masquer l'adresse";
      document.getElementById("test").style.visibility="visible";
   }
   else
   {
      document.getElementById('afficher').firstChild.nodeValue = "Afficher l'adresse";
      document.getElementById("test").style.visibility="hidden";
   }
}
/* ]]> */
</script>
</head>
<body>
<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
</table>
   <div onclick="afficher()" id="afficher">Afficher l'adresse</div>
   <div id="test" style="visibility: hidden">
	<table border="1">
		<tr>
			<td>77777777777777777777</td>
			<td>88888888888888888888</td>
			<td>99999999999999999999</td>
		</tr>
	</table>
   </div>
<table border="1">
<tr>
	<td>10</td>
	<td>11</td>
	<td>12</td>
</tr>
<tr>
	<td>13</td>
	<td>14</td>
	<td>15</td>
</tr>
</table>
</body>
</html>

C'est pas vraiment génial surtout si l'on veut garder les dimension des précédentes colonnes, ou même insérer du contenu dans un tableau existant de manière quazi transparente...
J'en conclu qu'il est préférable soit de créer un nouveau tableau en fermant le précédent, soit de rajouter une ligne quoi qu'il en soit qui sera vide, puis qui affichera le contenu ...

Avec ce code ça fonctionne, mais il faut quand même créer un nouveau tableau a l'intérieur du <div> :

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Masquer/Afficher au clic de souris</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }

function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
</script>
</head>
<body>
<table border="1">
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
</tr>
<tr><td><div class="clicTitre">
  <a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');">Fermer</a>
  </div>
  blabla
<table>
<tr><td>Test</td></tr>
<tr><td>Afficher / masquer</td></tr>
</table>
</div></td></tr>
<tr>
	<td>10</td>
	<td>11</td>
	<td>12</td>
</tr>
<tr>
	<td>13</td>
	<td>14</td>
	<td>15</td>
</tr>
</table>
</body>
</html>

Alors je n'ai pas non plus tout testé, si vous voyez des choses qui peuvent améliorer et surtout contredire ce que je viens d'écrire, n'hésitez surtout pas !!!

par **Cyrano** » 04 avr. 2006, 21:58

Par contre un div caché dans une ligne de tableau, affiche quand même un espace vide non?
Non

Ça dépend de la méthode utilisée :
- Avec Visibility : hidden; l'espace sera vide dans les dimensions du bloc et laissera une place inoccuppée;
- Avec Display : none; rien n'apparaîtra du tout, pas même un espace.

par **PhilFree** » 04 avr. 2006, 20:42

Par contre un div caché dans une ligne de tableau, affiche quand même un espace vide non?

Non

par **Snoops** » 04 avr. 2006, 00:26

Salut,
Inspire toi de ce post avec l'utilisation de l'attribut id et getElementById.

Je te remercie, il est vrai que je n'utilise pas souvent les <div> et je les avais un peu zappées.
Par contre un div caché dans une ligne de tableau, affiche quand même un espace vide non?

Thank's

par **Truc** » 04 avr. 2006, 00:19

Salut,
Inspire toi de ce post avec l'utilisation de l'attribut id et getElementById.

par **Snoops** » 04 avr. 2006, 00:00

Bonsoir,

Voilà je voudrais gérer l'affichage de messages d'erreur par Javascript lorsque l'utilisateur remplit un formulaire et se trompe.
Pour ce qui est d'afficher un message quelconque dans un <input type="text"> aucun problème.
Ce que j'aimerais savoir c'est s'il y a moyen d'afficher et cacher du texte ?
En fait pour le moment je gère ça en php et je peux donc afficher ou non à loisir un message texte classique en rajoutant une balise <tr></tr> dans mon tableau si l'utilisateur s'est trompé. Je peux aussi joué avec CSS pour cacher cette fameuse ligne, mais ce que je ne sais pas faire, c'est afficher une ligne de tableau qui aurait été caché en display : none, puisque les balises de tableaux n'acceptent pas de noms...
Et je ne sais changer le style CSS d'une balise que par son nom...

Je sais pas si je me suis bien fait comprendre, j'espère que si, sinon demandez moi plus de précisions.

Merci d'avance

Caché affiché du texte

Répondre

Étendre la vue Revue du sujet : Caché affiché du texte

Caché affiché du texte