[HTML/JavaScript] Rendre visible une ligne d'un tableau

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

Si tu as essayé de faire :

Code:

---

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:

---

1 2 3 4 5

<table> <tr onclick="this.style.display='none'"> <td>Gnia</td> </tr> </table>

---

Citation:

---

Envoyé par Bisûnûrs

Si tu as essayé de faire :

Code:

---

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 ;)

Citation:

---

Envoyé par Bisûnûrs

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

Code:

---

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:

---

1 2	onchange="visibleNumExt()"

---

Ma fonction javaScript est la suivante :

Code:

---

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:

---

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

Je crois que je me rapproche avec :

Code:

---

1 2	style.visibility='hidden'

---

Code:

---

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. ;)

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.

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 ?

heu oui ....

Code:

---

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>

---

J'ai trouvé !
Il faut utiliser :

Code:

---

1 2	style.display='';

---

Code:

---

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:

---

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>

---