Donner des id automatiques aux éléments à insérer dans le DOM

**Xeuch** · 03/04/2013, 18h48

Bonjour les pro du web !

Voici ma question :

j'ai créer un tableau avec un lien "ajouter une ligne" à coté. au click sur ce lien une nouvelle ligne s'ajoute à mon tableau.La 1ere cellule d'une ligne contient un select et les autres des input ( j'ai au total 3 cellules)

Apres création d'une nouvelle ligne, j'utilise Ajax pour remplir le select de la première cellule. Cependant le traitement marche une seule fois ( seule le premier select de la 1ere cellule est rempli) car c'est le même id que je donne à chaque fois à mes selects
je voudrais savoir comment donner des id automatiques aux selects et inputs que je crée.
j'ai pensé à récupérer à chaque fois le nombre total de lignes du tableau et de créer les id automatique = select+nbLigne (par exemple select15 si on avait 14 ligne ajout l'ajout de cette ligne) mais je ne sais pas si c'est une bonne idée.

voici mon code :

le tableau :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<body> 
	<a href="javascript:ajouterLigne('matable');">Ajouter une ligne</a>
	<table id="matable">
		<tr>
			<td>Une cellule</td>
			<td>Une cellule</td>
			<td>Une cellule</td>
		</tr>
	</table>
</body>

et le JavaScript

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
76
77
<SCRIPT type='text/javascript'>	
function getXhr(){
        var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
        return xhr;
}
 
function ajouterLigne(tableau){
	tableau = document.getElementById(tableau);
	//Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
	var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
	var tr = document.createElement('tr'); //On créé une ligne
	//On ajoute autant les cellules
	//var firstLine=false;
	for(var i=0; i<tds; i++){
		//premiere cellule serai un select
		if(i==0){
			var td = document.createElement('td');
			var zone=document.createElement('select');
			zone.setAttribute("id","leSelect");
			zone.name= "myselect";
			td.appendChild(zone);
			tr.appendChild(td);
		}
		//le reste des input
		else{
			var td = document.createElement('td');
			var zone=document.createElement('input');
			zone.type="text";
			zone.name= "myintput";
			zone.value="testt";
			td.appendChild(zone);
			tr.appendChild(td);
		}
	}
	//On ajoute la ligne créée au tableau : attention, sur firefox on peut ajouter directement au tableau, mais IE ajoute par défaut un noeud tbody à la table
	if(tableau.firstChild.tagName == 'TBODY'){
		tableau.firstChild.appendChild(tr);
	}
	else{
		tableau.appendChild(tr);
	}
	//TRAITEMENT AJAX
	var xhr = getXhr();
	//RECEPTION DES DONNEES
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			leNouveauSelect = xhr.responseText;
			//alert(leNouveauTab);
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('leSelect').innerHTML = leNouveauSelect;
		}
	}
	//ENVOI DES DONNEES AU SERVEUR
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxAfficheAjoutLignFiche.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	var idSelect=document.getElementById('leSelect');
	xhr.send("idSelect="+idSelect);		
}
</script>

Merci de votre aide

**NoSmoking** · 03/04/2013, 19h12

Bonjour,

j'ai pensé à récupérer à chaque fois le nombre total de lignes du tableau et de créer les id automatique = select+nbLigne (par exemple select15 si on avait 14 ligne ajout l'ajout de cette ligne) mais je ne sais pas si c'est une bonne idée.

c'est une bonne idée sauf si tu peux supprimer la ligne, mais peux être également n'es tu pas obligé d'utiliser d'id si tu spécifies une ligne de la TABLE à atteindre.

**Xeuch** · 03/04/2013, 19h22

Merci beaucoup de ta réponse.

je ne comprend pas ce que tu entend par "si tu peux supprimer la ligne" ?

Enfait ce que j'ai présenté ici n'est qu'un exemple simplifié de mon tableau.
les inputs et selects des lignes doivent être remplies par un utilisateur et valider à l'aide d'un formulaire. C'est une autre raison d'avoir des id automatique afin de pouvoir récupérer les valeurs pour l'insertion dans ma base de données MySQL.

Merci encor

**Xeuch** · 03/04/2013, 19h26

si je veux utiliser un compteur je me pose des questions quant à son initialisation

si je fais ça :

Code php :

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

<span><?php$compteur=0;?> <span id="leCompteur"><?php echo $compteur;?></span></span>

est ce que la valeur de compteur sera remise à zero apres insertion d'une ligne ou bien il ne changera que quand je vais le mettre à jour apres insertion d'une ligne

avec un :

Code :

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

document.getElementById('leCompteur').innerHTML=compteur+1

Dois faire directement ça :

Code html :

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

<span><span id="leCompteur">0</span></span>

pour l'initialisation ??

Merci de votre aide

**SpaceFrog** · 03/04/2013, 20h02

Code php :

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

1
2
3
4
5
 
<?php
for($i=0;$i<10; $i++){
echo '<span id="leCompteur'.$i.'">ce span a pour id leCompteur'.$i.' </span>';}
}

**NoSmoking** · 03/04/2013, 20h11

et valider à l'aide d'un formulaire.

c'est une bonne raison d'avoir des NAME mais pas des ID.

Enfait ce que j'ai présenté ici n'est qu'un exemple simplifié de mon tableau.

c'est pour cette raison que l'on ne sait pas si tu laisses la possibilité de supprimer une ligne de ton tableau à l'internaute.

**Xeuch** · 04/04/2013, 10h48

Merci SpaceFrog et Nosmoking,

Enfait il n'y aura pas la possibilité de supprimer des lignes.

Oui c'est une bonne idée les name et d'ailleurs c'est que je pensais utiliser pour les input de mes cellules.

Cependant ce que je veux faire c'est avoir un compteur (entier) que je stock dans une balise du DOM.A chaque fois que l'utilisateur cliquera sur le bouton "ajouter nouvelle ligne", je récupère sa valeur que je vais la concaténer avec un nom par exemple leCompteur (comme ce que que SpaceFrog à fait).

Une fois la nouvelle ligne ajouter , j'incrémente de 1 la valeur du compteur et le met à jour dans la balise qui le contient avec un innerHTML ou un value (selon la balise).

Est ce comme ça qu'il faut le faire ??

Pour le moment j'utilise un span:

Code html :

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

<span>valeurCompeur</span>

mais le problème est que la valeur du compteur apparait dans ma page ce qui n'est pas joli,

Donc voici ma question : dois je utilisé un span et le cacher ?
ou bien pourrais utiliser un input de type hidden ??

Voici ce que j'ai fais pour le moment :
la concaténation marche bien quand je vérifie avec un alert(), cependant quand j'essai de récupérer le select il me di que la référence n'existe pas ce qui me fais penser que l'attribut n'a pas été correctement donnée à mon select.

voici le code :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php 
//initialisation de mon compteur à l'arrivé sur la page
$compteur=0; ?>
<span id="leCompteur"><?php $compteur;?></span> 
 
<a href="javascript:ajouterLigne('matable');">Ajouter une ligne</a>
<table id="matable">
	<tr>
		<th>Une cellule</th>
		<th>Une cellule</th>
		<th>Une cellule</th>
	</tr>
</table>

je met juste la partie qui nous intéresse pour le 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
//recuperation du comteur
nbLign =+document.getElementById('leCompteur').innerHTML;
alert(nbLign);
var idAndNameDuSelect; // contiendra la concaténation de "select" et du compteur
 
//On des cellules
for(var i=0; i<tds; i++){
//premiere cellule doit etre un select
	if(i==0){
		idAndNameDuSelect="select"+nbLign; //concaténation
		alert(idAndNameDuSelect);
		var td = document.createElement('td');
		var zone=document.createElement('select');
		zone.setAttribute("id",idAndNameDuSelect);
		zone.setAttribute("name",idAndNameDuSelect);
		td.appendChild(zone);
		tr.appendChild(td);
	}
 
//le reste des inputs
	else{
		var td = document.createElement('td');
		var zone=document.createElement('input');
		zone.type="text";
		zone.name= "myintput";
		zone.value="testt";
		td.appendChild(zone);
		tr.appendChild(td);
	}
}
//Incrementer le compteur et remettre sa valeur dans le span
nbLign++;
document.getElementById('leCompteur').innerHTML=nbLign;
 
//On ajoute la ligne créée au tableau
if(tableau.firstChild.tagName == 'TBODY'){ // si IE
	tableau.firstChild.appendChild(tr);
}
else{ //Sinon
	tableau.appendChild(tr);
}
 
//TEST RECUPERATION DE du select qu'on vien de creer
var val=document.getElementById('idAndNameDuSelect');
alert(val);

Merci

**Golgotha** · 04/04/2013, 11h22

Bonjour Xeuch,

ça m'a l'air un peux complexe tout ça, voici un exemple avec jQuery, de ce que je fait d'habitude dans le cas d'un tableau dynamique.

Démo sur jsFidle

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<body> 
    <button id="add_line" >Ajouter une ligne</button>
	<table id="matable" border=1>
		<tr id="row_1">
			<td>Une cellule</td>
			<td>Une cellule</td>
			<td>Une cellule</td>
		</tr>
	</table>
</body>

Code javascript :

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

1
2
3
4
5
6
7
$("#add_line").click(function(){
 
    var last_row = $('#matable tr:last');
    var new_id = parseInt($(last_row).attr('id').split("_")[1]) + 1;
    $(last_row).clone().insertAfter('#matable tr:last').attr('id','row_' + new_id);
 
});

Si ça peux te donner des idées

**Xeuch** · 04/04/2013, 11h37

Merci beaucoup Golgotha de ta réponse.

Cependant je m'y connais pas beaucoup en jquery et le problème est que je dois identifier chaque cellule de la ligne ajouter: la première sera un select que je dois remplir automatiquement par Ajax et les autres des inputs.

Le tableau sera dans un formulaire que je vais envoyer après pour récupérer les données. j'ai présenté ici de façon simple ce que je veut faire.

Actuellement mon problème c'est pourquoi je quand j'essai de récupérer le select je n'ai rien alors que je devais avoir comme retour :

Code :

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

objectHLMLSelectElement

Merci

**Golgotha** · 04/04/2013, 12h06

Envoyé par Xeuch

Cependant je m'y connais pas beaucoup en jquery

Prends 1 jours pour apprendre les bases, ça t'en fera gagner beaucoup plus dans peux de temps

Sinon pour ton problème :

Code javascript :

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

var val=document.getElementById(idAndNameDuSelect);

Sans quote sur idAndNameDuSelect, c'est une variable.

**Xeuch** · 04/04/2013, 12h23

Merci beaucoup Golgotha
c'était juste ça le problème, je n'y avais même pas prêté attention

ça marche bien maintenant

Merci pour les conseils, apparemment le jQuery est plus simple, je m'y mettrais

juste en question encore,

comment faire pour cacher ce qui est dans un span?? parce que la valeur de mon compteur s'affiche sur la page et ce n'est pas très jolie.

Merciiiii infiniment

j'ai finalement utilisé un div qui va contenir mon select (première cellule) c'est plus propre.
Je poste le code pour les autres qui en auront besoins peu être un jour.

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
 
<SCRIPT type='text/javascript'>	
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
		function ajouterLigne(tableau){
			tableau = document.getElementById(tableau);
			//Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
			var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('th').length;
 
			var tr = document.createElement('tr'); //On créé une ligne
 
			//recuperation du comteur
			nbLign =+document.getElementById('leCompteur').innerHTML;
			//alert(nbLign);
			var idAndNameDuSelect; // contiendra la concaténation de "select" et du compteur
			var divName;
 
			//On crée les cellules
			for(var i=0; i<tds; i++){
			//premiere cellule doit etre un select
				if(i==0){
					idAndNameDuSelect="select"+nbLign; //concaténation
					divName="div"+nbLign;
 
					var div = document.createElement('div'); //On créé une ligne
					div.setAttribute('id',divName);
 
					var td = document.createElement('td');
					var zone=document.createElement('select');
 
					zone.setAttribute("id",idAndNameDuSelect);
					zone.setAttribute("name",idAndNameDuSelect);
 
					div.appendChild(zone);
					td.appendChild(div);
					tr.appendChild(td);
				}
 
 
 
			//le reste des inputs
				else{
 
					var td = document.createElement('td');
					var zone=document.createElement('input');
					zone.type="text";
					zone.setAttribute("name","monSelect");
					td.appendChild(zone);
					tr.appendChild(td);
				}
			}
			//Incrementer le compteur et remettre sa valeur dans le span
			nbLign++;
			document.getElementById('leCompteur').innerHTML=nbLign;
 
			//On ajoute la ligne créée au tableau
			if(tableau.firstChild.tagName == 'TBODY'){ // si IE
				tableau.firstChild.appendChild(tr);
			}
			else{ //Sinon
				tableau.appendChild(tr);
			}
 
			//TRAITEMENT AJAX
			var xhr = getXhr();
 
			//RECEPTION DES DONNEES
			// On défini ce qu'on va faire quand on aura la réponse
			xhr.onreadystatechange = function(){
				// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
				if(xhr.readyState == 4 && xhr.status == 200){
					leNouveauSelect = xhr.responseText;
					// On se sert de innerHTML pour rajouter les options a la liste
					document.getElementById(divName).innerHTML = leNouveauSelect;
				}
			}
 
			//ENVOI DES DONNEES AU SERVEUR
 
			// methode post
			xhr.open("POST","ajaxAfficheAjoutLignFiche.php",true);
			// ne pas oublier ça pour le post
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send("idAndNameDuSelect="+idAndNameDuSelect);		
		}
 
	</script>
 
	<body> 
 
 
		<?php 
		//initialisation de mon compteur à l'arrivé sur la page
		$compteur=0; ?>
		<span id="leCompteur"><?php $compteur;?></span> 
 
		<a href="javascript:ajouterLigne('matable');">Ajouter une ligne</a>
		<table id="matable">
			<tr>
				<th>Une cellule</th>
				<th>Une cellule</th>
				<th>Une cellule</th>
			</tr>
		</table>
</body>

Il faut juste faire la même chose après pour les attributs name (pour le select et les input) pour la récupération des données après l'envoi du formulaire

Pensez aussi à créer un input type hidden qui va contenir le compteur ( nombre de lignes ajoutées) et que vous remplirez lorsque vous envoyer le formulaire, avec un onSubmit ça marche bien

Merci

Donner des id automatiques aux éléments à insérer dans le DOM

JavaScript

Discussions similaires

Partager

Partager