[DOM] Création tableau dynamiquement DOM

**knebhi** · 10/06/2009, 15h25

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 :

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

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

**le_chomeur** · 10/06/2009, 15h29

Bonjour , une petite recherche s'imposait !

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

**knebhi** · 11/06/2009, 12h38

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

[DOM] Création tableau dynamiquement DOM

JavaScript

Vue hybride

Discussions similaires

Partager

Partager