Faire apparaitre un certain nombre de lignes

Version imprimable

Salut !

J'ai un champ text où le visiteur entre le nombre d'articles à insérer et un bouton de type "button". Il entre son chiffre x et appuie sur le bouton, ça appelle la fonction javascript et je veux qu'on affiche x fois trois lignes de tableaux champs à remplir.

Pour l'instant ma fonctionne fonctionne mais je suis obligé de mettre mon div en début de formulaire alors que je le voudrais à la fin...
Code:

1 2 3 4 5 6 7 8 <table> <tr> <td>Nombre d'articles achetés : </td> <td><input type="text" name="nbArtAjoutMouv"><input type="button" value="OK" onClick="ShowRows();"></td> </tr> <div id="nbArtAjoutMouv"></div> </table>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script language="javascript"> function ShowRows() { var text = ""; var Obj = document.getElementById( 'nbArtAjoutMouv'); // On rÃ©cupÃ¨re le DIV var nb = document.Form_AjoutMouv.nbArtAjoutMouv.value; // On rÃ©cupÃ¨re la valeur du champ for (i=1; i<=nb; i++) { text = text + "<tr><td>Libellé de l'article : </td><td><input type='text' name='libArtMouv'></td></tr>" +"<tr><td>Quantité : </td><td><input type='text' name='quanArtMouv'></td></tr>" +"<tr><td>Prix unitaire : </td><td><input type='text' name='libArtMouv'></td></tr><tr></tr>"; } alert(text); Obj.innerHTML = text; // ecriture dans le DIV } </script>
Quelqu'un peut m'aider svp ?

Merci d'avance...

Je pense qu'il est probablement malencontreux de mettre une partie de tes tr après la balise table puis une autre partie dans une div...

Si ça marche en mettant la div en premier, c'est parce qu'il est possible de mettre les éléments d'un tableau dans une div, donc, si tu te trompes après, les navigateurs arrivent à se "démerder", mais si tu as commencé à mettre tes tr/td puis que tu ouvres ta div pour mettre les autres, ils n'y arrivent plus...

Une solution possible :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var text = "<tr> <td>Nombre d'articles achetés : </td> <td><input type="text" name="nbArtAjoutMouv"><input type="button" value="OK" onClick="ShowRows();"></td> </tr>"; var Obj = document.getElementById( 'nbArtAjoutMouv'); // On rÃ©cupÃ¨re le DIV var nb = document.Form_AjoutMouv.nbArtAjoutMouv.value; // On rÃ©cupÃ¨re la valeur du champ for (i=1; i<=nb; i++) { text += "<tr><td>Libellé de l'article : </td><td><input type='text' name='libArtMouv'></td></tr>\n <tr><td>Quantité : </td><td><input type='text' name='quanArtMouv'></td></tr>\n <tr><td>Prix unitaire : </td><td><input type='text' name='libArtMouv'></td></tr><tr></tr>"; } alert(text); Obj.innerHTML = text;
Je mesuis permis de remplacer text = text +... par text +=
et à rajouter des retours chariot en jS.

Citation:
Envoyé par Bovino
Je pense qu'il est probablement malencontreux de mettre une partie de tes tr après la balise table puis une autre partie dans une div...

Si ça marche en mettant la div en premier, c'est parce qu'il est possible de mettre les éléments d'un tableau dans une div, donc, si tu te trompes après, les navigateurs arrivent à se "démerder", mais si tu as commencé à mettre tes tr/td puis que tu ouvres ta div pour mettre les autres, ils n'y arrivent plus...

Une solution possible :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var text = "<tr> <td>Nombre d'articles achetés : </td> <td><input type="text" name="nbArtAjoutMouv"><input type="button" value="OK" onClick="ShowRows();"></td> </tr>"; var Obj = document.getElementById( 'nbArtAjoutMouv'); // On rÃ©cupÃ¨re le DIV var nb = document.Form_AjoutMouv.nbArtAjoutMouv.value; // On rÃ©cupÃ¨re la valeur du champ for (i=1; i<=nb; i++) { text += "<tr><td>Libellé de l'article : </td><td><input type='text' name='libArtMouv'></td></tr>\n <tr><td>Quantité : </td><td><input type='text' name='quanArtMouv'></td></tr>\n <tr><td>Prix unitaire : </td><td><input type='text' name='libArtMouv'></td></tr><tr></tr>"; } alert(text); Obj.innerHTML = text;
Je mesuis permis de remplacer text = text +... par text +=
et à rajouter des retours chariot en jS.
Merci pour ta réponse. Ca ne fonctionne pas sous IE6 et sous MF2 ça s'affiche toujours en haut de la page. Je comprends que ce ne soit pas une bonne solution de remettre des tr mais est-il possible de faire autrement ? L'idéal aurait été de créer un fieldset juste après le tableau avec le bon nombre de lignes mais il ne s'affiche pas ! Même après le tableau, quelqu'un peut m'aider svp ?

14/06/2008, 22h24
Bovino
Tu as bien pensé à supprimer le premier tr du code html avec ma solution ?
Code:

1 2 3 <table> <div id="nbArtAjoutMouv"></div> </table>
14/06/2008, 22h35
Jiraiya42

Non je crois que je pige pas ta solution
14/06/2008, 23h20
Bovino
La solution que je te propose, c'est au lieu d'avoit une page du style
Code:

1 2 3 4 <table> <tr><td>...</tr></td> <div><tr>...</tr><tr>...</tr></div> </table>
qui est problématique, d'avoir juste
Code:

1 2 3 4 <table> <div id="nbArtAjoutMouv"><tr><td>...</tr></td> <tr>...</tr><tr>...</tr></div> </table>
voire mieux :
Code:

1 2 3 4 <table id="nbArtAjoutMouv"> <tr><td>...</tr></td> <tr>...</tr><tr>...</tr> </table>
en ajoutant juste ton premier tr dans ta variable texte au début, en lui ajoutant les éléments trouvés et en les insérant dans table.innerHTML...

ajouter des cellules dans un tableau en utilisant innerHTML... beurk
Utilise les méthodes appropriées : insertRow() insertCell()

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<html>
<head>
<script type="text/javascript">
<!--
 
function ajoutLigne()
{
  var Cell, i;
  var nb = document.getElementById("nombre").value;
  var tableau = document.getElementById('tableau');
  var ligne, numLigne, inputTxt;
  
  nb = new Number(nb);
  
  for (i=0; i<nb; i++)
  {
    ligne = tableau.insertRow(-1); 
    
    /* numéro de ligne */
    numLigne = ligne.rowIndex;
    Cell = ligne.insertCell(0);
    Cell.innerHTML = numLigne;
    
    /* input Libellé */
    inputTxt = document.createElement("input");
    inputTxt.type = "text";
    inputTxt.id = "libelle"+numLigne;
    inputTxt.style.width = "100%";
     
    Cell = ligne.insertCell(1);
    Cell.appendChild(inputTxt);
    
    /* input Quantité */
    inputTxt = document.createElement("input");
    inputTxt.type = "text";
    inputTxt.id = "quantite"+numLigne;
    inputTxt.style.width = "100%";
     
    Cell = ligne.insertCell(2);
    Cell.appendChild(inputTxt);
    
    /* input PU */
    inputTxt = document.createElement("input");
    inputTxt.type = "text";
    inputTxt.id = "pu"+numLigne;
    inputTxt.style.width = "100%";     
     
    Cell = ligne.insertCell(3);
    Cell.appendChild(inputTxt);
 
  }
 
}
 
//-->
</script>
 
</script>
</head>
<body>
 
<form id="formulaire">
  <label>N ?</label><input type="text" id="nombre" /><br />
  <input type="button" value="Ajouter" onclick="ajoutLigne()" />  
</form>
 
  <table id="tableau" border="1">
  <tr>
  <td style="width: 40px; text-align: center">&nbsp;</td>
  <td style="width: 200px; text-align: center">Libellé</td>
  <td style="width: 200px; text-align: center">Quantité</td>
  <td style="width: 200px; text-align: center">Prix unitaire</td>
  </tr> 
  </table>
 
 
</body>
 
 
</html>