Afficher un tableau

**Jinkas99** · 13/10/2017, 12h47

Bonjour,

Je cherche à afficher un tableau composé d'un libellé et une zone de texte en fonction d'une liste de sélection. Mon problème est que je n'arrive à mettre sur 2 <td> différents le libellé et la zone de texte et l'afficher correctement en dessous de la liste de sélection.

Mon code est le suivant :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
<HTML>
   <HEAD>
      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
      <TITLE>xxxxxxxx</TITLE>
      <style type="text/css">
             .my_css {
             width:1px;
             }
      </style>
      <script>
        window.onload = function() {
            document.getElementById('document1').style.display = 'none';
        }
 
        function addElements() {
 
            var number = document.getElementById("x").value;
 
            var document1= document.getElementById("document1");
 
            while (document1.hasChildNodes()) {
 
                document1.removeChild(document1.lastChild);
            }
 
 
            for (j = 0; j < number; j++) {
                var newRow1 = document.createElement('tr');
 
                newRow1.innerHTML = '<td> <input type="text" name="Designation_' + j + '" ></td>';
 
                document1.appendChild(newRow1);
            }
 
 
 
            if (number == 0) {
 
                document.getElementById('document1').style.display = 'none';
            } else {
 
                document.getElementById('document1').style.display = 'block';
            }
        }
 
      </script>
 
   </HEAD>
 
   <form >
 
      <table>
 
         <tr>
            <td>
               <select id='x' name='x' onChange='addElements()'>
                  <option value='0'>0</OPTION>
                  <OPTION value='1'>1</OPTION>
                  <OPTION value='2'>2</OPTION>
                  <OPTION value='3'>3</OPTION>
                  <OPTION value='4'>4</OPTION>
               </select>
            </td>
            <br>
         </tr>
         <tr>
             <td><div id ="document1"></div> </td>
             <td><div id ="document2"></div> </td>
             <td> </td>
             <td> </td>
         </tr>
      </table>
   </form>
   </body>
</html>

Merci.

**SpaceFrog** · 13/10/2017, 12h58

Code :

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

1
2
3
  </td>
            <br>
         </tr>

il fait quoi là le br ???

**Jinkas99** · 13/10/2017, 13h03

Merci pour votre réactivité et votre réponse.

Je viens de le supprimer. Mais c'est pas le br le problème :-)

**SpaceFrog** · 13/10/2017, 13h46

Je ne comprends pas trop le but final ?
tu veux qu'une entête fasse deux colonnes en largueur ???
=> colspan ..

**Jinkas99** · 13/10/2017, 15h11

Je n'arrive pas à afficher un libellé devant la zone de texte dans un autre <td> dans un autre conteneur.

J'aurais pu ajouter un autre <td> dans le innerHTML mais au niveau de l'affichage c'est considéré que les 2 sont dans un même et seul <td>

Merci.

**SpaceFrog** · 13/10/2017, 15h34

Tu n'aurais pas un screenshot ou un schema ou un jsfiddle ...
Je n'ai toujours pas compris

**Jinkas99** · 13/10/2017, 16h08

AVANT :

APRES (SOUHAITE)

Nom : après.png
Affichages : 280
Taille : 3,0 Ko

Merci.

**SpaceFrog** · 13/10/2017, 17h52

Il y a un souci majeur dans ton tableau ...
chaque tr doit contenir le même nombre de td
ou la somme des colspans des td doit être égale pour tous les tr ..

ton premier tr contient un seul td
le seconde 4 ?????

**Jinkas99** · 13/10/2017, 18h07

Oui c'est vrai. Je n'ai pas fait attention mais ça ne résout pas le problème.

**Jinkas99** · 13/10/2017, 18h20

J'ai essayé d'ajouter les lignes en rouge :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
for (j = 0; j < number; j++) {
                var newRow1 = document.createElement('tr');
 
                newRow1.innerHTML = '<td> <input type="text" name="Designation_' + j + '" ></td>';
 
                document1.appendChild(newRow1);

                var newRow2 = document.createElement('tr');
 
                newRow1.innerHTML = '<td> <input type="text" name="Designation_' + j + '" ></td>';
 
                document2.appendChild(newRow2);
            }

Voici le résultat:

Nom : img1.png
Affichages : 276
Taille : 4,1 Ko

Cependant, il y a décalage au niveau de l'affichage (voir lignes noires).

Merci.

**NoSmoking** · 15/10/2017, 10h35

Bonjour,
j'ai du mal à voir ce que tu cherches à faire avec ce code

Code :

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

1
2
3
4
5
6
7
8
9
for (j = 0; j < number; j++) {
  var newRow1 = document.createElement('tr');
  newRow1.innerHTML = '<td> <input type="text" name="Designation_' + j + '" ></td>';
  document1.appendChild(newRow1);
 
  var newRow2 = document.createElement('tr');
  newRow1.innerHTML = '<td> <input type="text" name="Designation_' + j + '" ></td>';
  document2.appendChild(newRow2);
}

n'y aurait-il pas de confusion dans les différentes références à tes éléments ?

Je pense que ce genre de formulaire gagnerait à avoir la structure suivante

Code html :

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

1
2
3
4
5
6
<p>
<label>
  Le libellé
</label>
  <input type="text" name="designation[]">
</p>

l'alignement pourra se faire en appliquant le CSS suivant (exemple)

Code css :

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

1
2
3
4
label {
  display: inline-bloc;
  width: 10em;
}

**Jinkas99** · 17/10/2017, 15h41

Bonjour,

Je cherche à faire comme sur les images. Le code suivant c'est la solution que j'ai trouvée pour afficher les libellés et zones de texte. Je sais que ça ne parait pas être une bonne solution.

Code :

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

1
2
3
4
5
6
7
8
9
for (j = 0; j < number; j++) {
  var newRow1 = document.createElement('tr');
  newRow1.innerHTML = '<td> label ></td>';
  document1.appendChild(newRow1);
 
  var newRow2 = document.createElement('tr');
  newRow2.innerHTML = '<td> textbox </td>';
  document2.appendChild(newRow2);
}

**headmax** · 17/10/2017, 18h40

Salut, j'arrive pas a saisir comme @NoSmoking

salut au passage. Le pourquoi faire une boucle sans utiliser les itérateurs soit le fameux j
Tu initialise ta boucle pour dynamisé certainement l'utilisé serait déjà un objectif, si ça ne résout pas le problème

.

Soit le label et le textbox une chaine string représentant du html ça va de soit, et document1 et document2 des objects élément html.

Code :

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

1
2
3
4
5
6
7
8
9
 
var txt = [{"text":'<label>text label</label>', "doc":document1}, {'text':"<input type='text' value='test' id='t_1'/>", "doc":document2}];
var tr = [];
for (j = 0; j < txt.length; j++) {
  tr[j] = document.createElement('tr');
  tr[j].innerHTML = '<td>' + txt[j].text  + '</td>';
  txt[j].doc.appendChild(tr[j]);
  console.log(tr[j])
}

**Jinkas99** · 17/10/2017, 19h10

Très simple ma demande

J'ai la liste de sélection ci-dessous

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
<td>Nombre d'éléments&nbsp;:</td>            
<td>
               <select id='x' name='x' onChange='addElements()'>
                  <OPTION value='0'>0</OPTION>
                  <OPTION value='1'>1</OPTION>
                  <OPTION value='2'>2</OPTION>
                  <OPTION value='3'>3</OPTION>
                  <OPTION value='4'>4</OPTION>
               </select>
            </td>
         </tr>

et je voudrais afficher en dessous autant de libellés et de zones de textes que la valeur sélectionnée. Le <td> des libellés se trouvera au même niveau que le <td> du libellé de la liste de sélection et le <td> des zones de textes au même niveau que le <td> de la liste de sélection.

**NoSmoking** · 17/10/2017, 19h30

Regarde la structure finale que tu souhaites obtenir à savoir

Code html :

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

1
2
3
4
5
6
7
8
<tr>                    <!-- enfant de TABLE (TBODY) -->
    <td>                <!-- enfant de TR -->
        <label></label> <!-- enfant de TD -->
    </td>
    <td>                <!-- enfant de TR -->
        <input>         <!-- enfant de TD -->
    </td>
</tr>

maintenant on peut observer qu'il te faut créer 1 <tr>, 2 <td>, 1 <label> et 1 <input> pour chaque ligne ajoutée, ligne qu'il te faut ajouter à la <table>.

Afficher un tableau

JavaScript

Discussions similaires

Partager

Partager