Discussion :

[Jibees]

Bonjour à tous,
Je souhaite rendre visible deux lignes d'un tableau uniquement selon une certaine condition (la valeur choisie dans un SELECT d'un formulaire). J'ai pensé placer mes lignes (qui contiennent des cellules) dans un <div></div> avec un id et un style="display: none;"
un petit coup de JavaScript et le tour est normalement joué. Mais non cela ne fonctionne pas ...
Bref ma question : comment rendre visible/invisible une/plusieurs ligne(s) d'un tableau ?
Merci
jb

[Bisûnûrs]

Si tu as essayé de faire :

Code HTML :

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

1
2
3
4
5
6
7
<table>
   <div>
      <tr>
         <td>Gnia</td>
      </tr>
   </div>
</table>

Ce n'est pas étonnant que ça ne fonctionne pas.

Tu peux aussi faire un display:none sur les lignes directement :

Code HTML :

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

1
2
3
4
5
<table>
   <tr onclick="this.style.display='none'">
      <td>Gnia</td>
   </tr>
</table>

[Jibees]

Si tu as essayé de faire :

Code HTML :

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

1
2
3
4
5
6
7
<table>
   <div>
      <tr>
         <td>Gnia</td>
      </tr>
   </div>
</table>

Ce n'est pas étonnant que ça ne fonctionne pas.

Oui j'ai essayé de faire ca
Ce n'est peut-etre pas étonnant pour un pro comme toi, pour moi ca l'est peut-etre

Tu peux aussi faire un display:none sur les lignes directement :

Code HTML :

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

1
2
3
4
5
<table>
   <tr onclick="this.style.display='none'">
      <td>Gnia</td>
   </tr>
</table>

Plus exactement je souhaite afficher ou non la (les précisement) si une option d'un SELECT est à 0 ou 1. Donc dans mon <select> j'ai

Code :

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

1
2
 
onchange="visibleNumExt()"

Ma fonction javaScript est la suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function visibleNumExt() {
if(document.EditView.statusExt.value=="1") {
this.document.getElementById("numExt").style.display='inline';
 
}
if(document.EditView.statusExt.value=="0") {
this.document.getElementById("numExt").style.display='none';
 
}
}

et ma ligne est comme ceci :

Code :

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

1
2
 
<tr id="numExt">

Au chargement de la page, la ligne s'affiche correctement. Par contre des que je l'a rend invisible puis visible (en changeant les options), la ligne est déformée et celle ci semble vouloir rentrer dans la taille de la colonne du dessus ...

[Jibees]

Je crois que je me rapproche avec :

Code :

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

1
2
 
style.visibility='hidden'

[Bisûnûrs]

Code Javascript :

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

1
2
3
4
5
6
7
8
function visibleNumExt() {
   if(document.EditView.statusExt.value=="1") {
      this.document.getElementById("numExt").style.display='block';
   }
   if(document.EditView.statusExt.value=="0") {
      this.document.getElementById("numExt").style.display='none';
   }
}

Et si c'est évident, c'est qu'il n'y a pas besoin d'un être pro (chose que je ne suis pas) pour savoir qu'une balise table ne prend pas de div en élément enfant.

[Jibees]

Avec block cela ne fonctionne malheureusement pas mieux.
Je me rapproche assez avec style.visibility='hidden'; malheureusement quand le contenu est caché, il y a toujours une ligne de même hauteur mais sans le contenu ... Du coup c moche, je veux évidement supprimer la ligne dans son ensemble.

[Bisûnûrs]

visibility garde la place allouée à l'élément mais le masque alors que display ne garde pas la place allouée à l'élément, c'est donc display qu'il faut utiliser.

On peut voir ton code du select et ses options ?

[Jibees]

heu oui ....

Code :

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

1
2
3
4
5
 
 <select name="statusExt" tabindex="3" onchange="visibleNumExt()">
 
<option selected="selected" value="1">Accessible</option>
<option value="0">Non Accessible</option>

[Jibees]

J'ai trouvé !
Il faut utiliser :

Code :

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

1
2
 
style.display='';

[Bisûnûrs]

Code Javascript :

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

1
2
3
4
5
6
7
8
function visibleNumExt() {
   if(document.getElementById('statusExt').options[document.getElementById('statusExt').selectedIndex].value=="1"){
      document.getElementById("numExt").style.display='block';
   }
   else{
      document.getElementById("numExt").style.display='none';
   }
}

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<select id="statusExt" name="statusExt" tabindex="3" onchange="visibleNumExt()">
   <option selected="selected" value="1">Accessible</option>
   <option value="0">Non Accessible</option>
</select>
 
<table border="1" >
   <tr id="numExt" style="display:block">
      <td width="200">lighre</td>
      <td width="200">^repfjgùmfdj</td>
   </tr>
   <tr style="display:block">
      <td width="200">pojrgojerg</td>
      <td width="200">pergperg</td>
   </tr>
</table>