Discussion :

[Jiraiya42]

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 :

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

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 :

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

[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 :

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

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.

[Jiraiya42]

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 :

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

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 ?

[Bovino]

Tu as bien pensé à supprimer le premier tr du code html avec ma solution ?

Code :

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

1
2
3
<table>
<div id="nbArtAjoutMouv"></div>
</table>

[Jiraiya42]

Non je crois que je pige pas ta solution

[Bovino]

La solution que je te propose, c'est au lieu d'avoit une page du style

Code :

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

1
2
3
4
<table>
<tr><td>...</tr></td>
<div><tr>...</tr><tr>...</tr></div>
</table>

qui est problématique, d'avoir juste

Code :

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

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

voire mieux :

Code :

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

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

[Auteur]

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

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