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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager