Cacher une ligne d'un tableau dans un formulaire

Version imprimable

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:

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>

07/11/2012, 15h15
Bovino

Code:

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.
08/11/2012, 09h09
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
08/11/2012, 09h22
SpaceFrog

Code:

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

Mais cela serait plus clair avec des id

Marche toujours pas :cry: :

Code:

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>

08/11/2012, 11h18
Bovino

Code:

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

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

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

JS

Code:

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:

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>

Citation:

Envoyé par JimmyG

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

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

JS

Code:

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:

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 ?

08/11/2012, 14h37
SpaceFrog

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