Discussion :

[JimmyG]

Voilà je veux afficher dans un formulaire (intégrant un tableau) une ligne cachée lorsque le select de la ligne précédente vaut autre chose que "" (rien). J'ai donc fait le code ci-après. Mais cela ne fonctionne pas. Pour info, je souhaite masquer la ligne et non le select seul car je veux aussi masquer le titre de ma ligne (d'ailleurs cela fonctionne en voulant masquer que le select et enchangeant table-row par block biensur). J'attends donc votre aide. Merci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<script type="text/javascript">
function suivant_invisible(select_surveille,nom_objet_invisible,valeur_surveillee) 
{
  var Obj = select_surveille.form.elements[nom_objet_invisible] ;
  if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue != valeur_surveillee) 
  {
    	Obj.style.display = 'table-row';
  } 
  else 
  {
      Obj.style.display = 'none';
  }
}
</script>
 
<p align='center'>Enregistrement d'une prise</p>
<form method='POST'>
    <table name="tableau" align='center'>
        <tr name='tr_tranche'>
          <td class='form_intitule'>Sélection de la Tranche :</td>    
          <td>
              <select onchange='suivant_invisible(this,"tr_etage","");'>
                  <option></option>
                  <option>Tranche 1</option>
                  <option>Tranche 2</option>
              </select>
          </td>    
        </tr>
        <tr name='tr_etage' style='display: none;'> 
          <td class='form_intitule'>Choix de l'étage :</td>      
          <td>
              <select onchange='suivant_invisible(this,"tr_bureau","");'>
                  <option></option>
                  <option>RDC</option>
                  <option>N1</option>
              </select>
          </td>
        </tr>
        <tr name='tr_bureau' style='display: none;'>
          <td class='form_intitule'>Choix du bureau :</td>
          <td>
              <select onchange='suivant_invisible(this,"tr_prise","");'>
                  <option></option>
                  <option>B1</option>
                  <option>B2</option>
              </select>
          </td>
        </tr>      
        <tr name='tr_prise' style='display: none;'>
          <td class='form_intitule'>Sélection d'une prise :</td>
          <td>    
              <select>
                  <option></option>
                  <option>i1</option>
                  <option>i2</option>
              </select>
          </td>
        </tr>              
    </table>
</form>

[Bovino]

Code :

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

var Obj = select_surveille.form.elements[nom_objet_invisible] ;

Une ligne de tableau n'est pas un élément de formulaire... Ta méthode pour récupérer la ligne est donc mauvaise. Le mieux serait de passer par un id (unique bien entendu) pour faciliter la récupération.

[JimmyG]

Aurais-tu une solution à me proposer car j'ai un peu de mal à comprendre comment je peux faire en passant par un formulaire pour cacher une ligne d'un tableau ? S'il te plait

[SpaceFrog]

Code :

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

document.getElementsByName['tableau'][0].getElementsByName['nom_de_ligne'][0].style.display="none"

Mais cela serait plus clair avec des id

[JimmyG]

Marche toujours pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
function suivant_invisible(select_surveille,nom_objet_invisible,valeur_surveillee) 
{
  var Obj = document.getElementsById['tableau'][0].getElementsById['nom_objet_invisible'][0];
  if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue != valeur_surveillee) 
  {
    	Obj.style.display = 'table-row';
  } 
  else 
  {
      Obj.style.display = 'none';
  }
}
</script>
 
<p align='center'>Enregistrement d'une prise</p>
<form method='POST'>
    <table id='tableau' align='center'>
        <tr id='tr_tranche'>
          <td class='form_intitule'>Sélection de la Tranche :</td>    
          <td>
              <select onchange='suivant_invisible(this,"tr_etage","");'>
                  <option></option>
                  <option>Tranche 1</option>
                  <option>Tranche 2</option>
              </select>
          </td>    
        </tr>
        <tr id='tr_etage' style='display: none;'> 
          <td class='form_intitule'>Choix de l'étage :</td>      
          <td>
              <select onchange='suivant_invisible(this,"tr_bureau","");'>
                  <option></option>
                  <option>RDC</option>
                  <option>N1</option>
              </select>
          </td>
        </tr>
        <tr id='tr_bureau' style='display: none;'>
          <td class='form_intitule'>Choix du bureau :</td>
          <td>
              <select onchange='suivant_invisible(this,"tr_prise","");'>
                  <option></option>
                  <option>B1</option>
                  <option>B2</option>
              </select>
          </td>
        </tr>      
        <tr id='tr_prise' style='display: none;'>
          <td class='form_intitule'>Sélection d'une prise :</td>
          <td>    
              <select>
                  <option></option>
                  <option>i1</option>
                  <option>i2</option>
              </select>
          </td>
        </tr>              
    </table>
</form>

[Bovino]

Code :

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

var Obj = document.getElementsById['tableau'][0].getElementsById['nom_objet_invisible'][0];

Franchement, tu devrais peut-être commencer par apprendre les bases de JavaScript quand même...

Nous ne sommes pas là pour coder à ta place mais pour t'aider à trouver des solutions. Si tu ne maitrises pas les bases du langage, ça rend les choses un peu compliquées...

[JimmyG]

Au temps pour moi, j'ai écrit n'importe quoi.

J'ai réussi çà y'est. Voilà le code :

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function suivant_invisible(select_surveille,nom_objet_invisible,valeur_surveillee) 
  {
    var ligne = document.getElementById(nom_objet_invisible); 
 
    if (select_surveille.options[select_surveille.selectedIndex].firstChild.nodeValue != valeur_surveillee) 
    {
        ligne.style.display = "table-row";
    } 
    else 
    {
        ligne.style.display = "none";
    }
 
}

HTML

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<p align='center'>Enregistrement d'une prise</p>
<form method='POST'>
    <table id='tableau' align='center'>
        <tr id='tr_tranche'>
          <td class='form_intitule'>Sélection de la Tranche :</td>    
          <td>
              <select onchange='suivant_invisible(this,"tr_etage","");'>
                  <option></option>
                  <option>Tranche 1</option>
                  <option>Tranche 2</option>
              </select>
          </td>    
        </tr>
        <tr id='tr_etage' style='display: none;'> 
          <td class='form_intitule'>Choix de l'étage :</td>      
          <td>
              <select onchange='suivant_invisible(this,"tr_bureau","");'>
                  <option></option>
                  <option>RDC</option>
                  <option>N1</option>
              </select>
          </td>
        </tr>
        <tr id='tr_bureau' style='display: none;'>
          <td class='form_intitule'>Choix du bureau :</td>
          <td>
              <select onchange='suivant_invisible(this,"tr_prise","");'>
                  <option></option>
                  <option>B1</option>
                  <option>B2</option>
              </select>
          </td>
        </tr>      
        <tr id='tr_prise' style='display: none;'>
          <td class='form_intitule'>Sélection d'une prise :</td>
          <td>    
              <select>
                  <option></option>
                  <option>i1</option>
                  <option>i2</option>
              </select>
          </td>
        </tr>              
    </table>
</form>

[JimmyG]

Au temps pour moi, j'ai écrit n'importe quoi.

J'ai réussi çà y'est. Voilà le code :

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function suivant_invisible(select_surveille,nom_objet_invisible,valeur_surveillee) 
  {
    var ligne = document.getElementById(nom_objet_invisible); 
 
    if (valeur_surveillee != 0) 
    {
        ligne.style.display = "table-row";
    } 
    else 
    {
        ligne.style.display = "none";
    }
 
}

HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<p align='center'>Enregistrement d'une prise</p>
<form method='POST'>
    <table id='tableau' align='center'>
        <tr id='tr_tranche'>
          <td class='form_intitule'>Sélection de la Tranche :</td>    
          <td>
              <select onchange='suivant_invisible(this,"tr_etage",1);'>
                  <option></option>
                  <option>Tranche 1</option>
                  <option>Tranche 2</option>
              </select>
          </td>    
        </tr>
        <tr id='tr_etage' style='display: none;'> 
          <td class='form_intitule'>Choix de l'étage :</td>      
          <td>
              <select onchange='suivant_invisible(this,"tr_bureau",1);'>
                  <option></option>
                  <option>RDC</option>
                  <option>N1</option>
              </select>
          </td>
        </tr>
        <tr id='tr_bureau' style='display: none;'>
          <td class='form_intitule'>Choix du bureau :</td>
          <td>
              <select onchange='suivant_invisible(this,"tr_prise",1);'>
                  <option></option>
                  <option>B1</option>
                  <option>B2</option>
              </select>
          </td>
        </tr>      
        <tr id='tr_prise' style='display: none;'>
          <td class='form_intitule'>Sélection d'une prise :</td>
          <td>    
              <select>
                  <option></option>
                  <option>i1</option>
                  <option>i2</option>
              </select>
          </td>
        </tr>              
    </table>
</form>

Par contre j'ai un soucis pour la suite, je veux aussi que lorsqu'on revient au premier element qu'on veut sélectionner que cela recache les suivants (dans le cas où l'on se serait tromper). Comment puis-je faire çà à partir de mon code désormais ?

[SpaceFrog]

oserais-je dire ... de la même façon ...