[DOM] Création tableau dynamiquement DOM

Bonjour,

j'ai réalisé un formulaire qui se présente sous forme de tableau html.
pour une catégorie de champs j'ai réalisé une fonction addligne qui permet d'ajouter une série de champs.

mon problème est que dans le formulaire html j'ai un tableau classique
et que lorsque je créée dynamiquement ces champs il se reproduise de façon linéaire. or je souhaiterai qu'il soit sous forme de table comme dans le formulaire html.

voici mes codes :

form.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
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test ajout dynamique</title>
<script type="text/javascript" src="test.js"> </script>
</head>
<body>
<FORM id="form" action="post">
 
<div id="loc">
<table>
 
<tr><td>Identifiant : <input value="id" type="text" /></td></tr>
 
<tr><td>Age : <input value="age" type="text" /></td></tr>
 
    <tr><td>Sexe :
	<select size="1">
		<option value="">Votre choix</option>
		<option value="M">Masculin</option>
 
		<option value="F">Féminin</option>
 
	</select></td></tr>
 
	<tr><td>Niveau d'études : <input value="" type="text" /></td></tr>
 
 
</table>
<input value="Ajouter un élément" id="idBouton" type="button" onclick="addLigne();" />
</div>
 
    <br />
 
</FORM>
 
 
 
 
</body>
</html>

test.js

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
//add locuteur
 
function addLigne()
{
  var i;
  var elForm = document.getElementById("loc");
  var objBouton = document.getElementById("idBouton");
 
  /*** Creation des 2 input de type texte ***/
  var elInput = new Array();
  for (i=0;i<3;i++)
  {
     elInput[i] = document.createElement("input");
     elInput[i].type = "text";
  }
 
  /*** Creation des 4 textNode ***/
  var elTxt = new Array();
  var tabTxt = new Array("Identifiant : ","Age : ","Sexe : ","Niveau d'études : ");
 
  for (i=0; i<tabTxt.length; i++)
  {
     elTxt[i] = document.createTextNode(tabTxt[i]);
  }
 
  /*** Creation de la liste et de ses options ***/
  var elSelect = document.createElement("select");
  elSelect.size = "1";
 
  /*** Creation des options ***/
  /*** syntaxe : Option("Text","Value",selected,false); ***/
  var elOption = new Array(
                          new Option("Votre choix","",false,false),
                          new Option("Masculin","M",false,false),
                          new Option("Féminin","F",false,false)
                          );
 
  /*** Ajout d une ligne de separation ***/
	  var ligne = document.createElement("hr");
	  ligne.style.width = "75%";
	  ligne.style.color = "#A1B2C3";
	  elForm.insertBefore(ligne, objBouton);
 
  /*** Insertion du 1er texte et du 1er input dans le document ***/
  elForm.insertBefore(elTxt[0], objBouton);
  elForm.insertBefore(elInput[0], objBouton);
  /*** Insertion du 2eme texte et du 2eme input dans le document ***/
  elForm.insertBefore(elTxt[1], objBouton);
  elForm.insertBefore(elInput[1], objBouton);
 
  /*** Ajout du 3eme textNode pour la liste ***/
  elForm.insertBefore(elTxt[2], objBouton);
 
  /*** Insertion du select dans le document ***/
  /*** Attention IE : il faut inserer le select dans le document avant d ajouter
  **** les options ***/
 
  elForm.insertBefore(elSelect, objBouton);
  for (i=0;i<elOption.length;i++)
  {
     elSelect.options.add(elOption[i]);
  }
 
  /*** Insertion du 4eme texte et du 3eme input dans le document ***/
  elForm.insertBefore(elTxt[3], objBouton);
  elForm.insertBefore(elInput[2], objBouton);
 
 
 
 
  /*** Ajout de sauts de lignes ***/
 
  elForm.insertBefore(document.createElement("br"), objBouton);
  elForm.insertBefore(document.createElement("br"), objBouton);
}

merci pour votre aide

Bonjour , une petite recherche s'imposait !

http://www.developpez.net/forums/d47...us-rapidement/

Citation:

Envoyé par le_chomeur

Bonjour , une petite recherche s'imposait !

http://www.developpez.net/forums/d47...us-rapidement/

je t'avoue que j'ai un peu de mal à appliquer l'exemple du lien avec mon formulaire.
peux tu me donner un petit coup de pouce sur l'application a mon code.

merci