Discussion :

[Darksnakes]

Salut tout le monde

voilà j'ai besoin, dans un formulaire, de permettre l'ajout ou la suppression dynamiquement de champs.

Le résultat que je chercher à atteindre est celui que l'on peut voir sur cette image

http://win.eurohub.free.fr/tuto/lowid/freebox5.jpg

j'ai essayer de commencer le script mais je me heurte à quelques problèmes


voici le fichier 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
 
var d,nb_lignes, nom_ligne,numero_ligne,boutton_supprimer,tr,td;
 
function AddChamp(){
d=document.getElementById('ligne_serveur');
//Compte le nombre d'éléments
nb_lignes=d.getElementsByTagName('input');
 
tr=document.createElement('tr');
tr.setAttribute('id','tr_'+nb_lignes.length);
d.appendChild(tr);
 
d=document.getElementById('tr_'+nb_lignes.length);
 
 
numero_ligne=document.createElement('input');
numero_ligne.setAttribute('type','text');
numero_ligne.setAttribute('name','numero_ligne'+nb_lignes.length);
numero_ligne.setAttribute('class','class="classinput_lsize"');
d.appendChild(numero_ligne);
 
boutton_supprimer=document.createElement('button');
boutton_supprimer.setAttribute('value','supprimer');
boutton_supprimer.setAttribute('onclick','removeElement("tr_'+nb_lignes.length+'")');
d.appendChild(boutton_supprimer);
}
function removeElement(id) {
	d = document.getElementById('ligne_serveur');
  var sup = document.getElementById(id);
  d.removeChild(sup);
}

Dans le corps :

Code :

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

1
2
<div id="ligne_serveur" style="margin-left:100px;width:200px">
						</div>

D'une part , si je fait un getElementsByTagName('tr') ça ne fonctionne pas, ce qui va m'embêter quand j'aurais plusieurs champs input. Ensuite ma fonction supprimer me renvoie une erreur également

Erreur*: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://162.38.113.245/lmb/profil_adm...erveur_voip.js :: removeElement :: line 39" data: no]

Si vous avez des idées ou des conseils pour me permettre d'arriver au résultat que je désire, je les prendrais avec volontiers.

Merci d'avance


Yann

[vermine]

Bonjour,

d est un div et non une table. Les <tr> s'accroche à des <table>.
Si:

Code :

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

1
2
 
d.getElementsByTagName('tr')

ne fonctionne pas, vous pouvez essayer (une fois que vous aurez une table):

Code :

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

1
2
 
d.rows;

[sebhm]

ce post devrait t'interesser

[Darksnakes]

le div est dans une table. Je l'ai mis en place au départ car mon but était de compter le nombre de tr dans ce div.(car il y a d'autre champ dans le formulaire).

Je regarde le lien dessuite

[vermine]

Le div à beau être dans une table, il n'empêche qu'on attache pas des <tr> à un div mais à une <table>.

[Darksnakes]

dans ce cas la, comment faire pour dire que je veux que le tr soit attacher à cette endroit? (appendChild attache à la fin il me semble)

[vermine]

Hé bien... Pour différencier vos <tr>, vous pouvez leur ajouter un attribut:

Code :

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

1
2
3
4
5
6
7
 
<tr att1>...</tr>
<tr att1>...</tr>
<tr att2>...</tr>
<tr att2>...</tr>
<tr att2>...</tr>
<tr att2>...</tr>

Ici vous avez deux ligne att1 et quatre lignes att2.

Code :

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

1
2
3
4
5
 
var liste_tr = maTable.rows;
 
if(liste_tr[0].getAttribute("att1") != null)
   alert("Youpiiiie");

Enfin, j'espère.

Mais l'appendChild du <tr> se fera bien sur une <table>.

Sinon, faites plusieurs tables ?

[Darksnakes]

Oui oui c'est ce que j'ai fait, je sais pas pourquoi j'y ai pas pensé plus tot

var d,nb_lignes, nom_ligne,numero_ligne,boutton_supprimer,tr,td;

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
function AddChamp(){
d=document.getElementById('ligne_serveur');
//Compte le nombre d'éléments
nb_lignes=d.rows.length;
 
tr=document.createElement('tr');
tr.setAttribute('id','tr_'+nb_lignes);
d.appendChild(tr);
 
d=document.getElementById('tr_'+nb_lignes);
 
numero_ligne=document.createElement('input');
numero_ligne.setAttribute('type','text');
numero_ligne.setAttribute('name','numero_ligne'+nb_lignes);
numero_ligne.setAttribute('class','class="classinput_lsize"');
d.appendChild(numero_ligne);
 
boutton_supprimer=document.createElement('input');
boutton_supprimer.setAttribute('type','button');
boutton_supprimer.setAttribute('value',"X");
boutton_supprimer.setAttribute('onclick','removeElement("tr_'+nb_lignes+'")');
d.appendChild(boutton_supprimer);
}
function removeElement(child_id) {
	var parent = document.getElementById('ligne_serveur');
	var child = document.getElementById(child_id);
  d.removeChild(child);
}

me reste plus qu'a faire fonctionner la fonction remove et ça sera parfait^^

[vermine]

D'abord, il y a ceci:

Code :

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

1
2
3
4
 
d.removeChild(child);
// au lieu de
parent.removeChild(child);

Ensuite, je ne suis pas certain que ceci soit correcte:

Code :

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

1
2
 
tr.setAttribute('id','tr_'+nb_lignes);

J'aurai plutôt tendance à faire:

Code :

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

1
2
 
tr.id = 'tr_'+nb_lignes;

C'est la même chose, vous allez me dire. Pas sûr. Ici on joue avec un id. Je ne sais pas trop comment il gère les id. Faites un alert dans la fonction remove pour voir l'id qu'il a.

[Darksnakes]

ha oui c'était ça l'erreur^^. En ce qui concerne le setAttribut ça a l'air de marcher, quand je regarde les id avec webdevelloper ça me mets les bons^^


merci beaucoup en tout et bonne journée

Ps: je remet le script dans sa dernière version, si ça peut aider des gens

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
var d,nb_lignes = 0, nom_ligne,numero_ligne,boutton_supprimer,tr,td;
 
function AddChamp(){
d=document.getElementById('ligne_serveur');
//Compte le nombre d'éléments
nb_lignes++;
 
tr=document.createElement('tr');
tr.setAttribute('id','tr_'+nb_lignes);
d.appendChild(tr);
 
d=document.getElementById('tr_'+nb_lignes);
 
numero_ligne=document.createElement('input');
numero_ligne.setAttribute('type','text');
numero_ligne.setAttribute('name','numero_ligne'+nb_lignes);
numero_ligne.setAttribute('class',"classinput_lsize"');
d.appendChild(numero_ligne);
 
boutton_supprimer=document.createElement('input');
boutton_supprimer.setAttribute('type','button');
boutton_supprimer.setAttribute('value',"X");
boutton_supprimer.setAttribute('onclick','removeElement("tr_'+nb_lignes+'")');
d.appendChild(boutton_supprimer);
}
function removeElement(child_id) {
	var parent = document.getElementById('ligne_serveur');
	var child = document.getElementById(child_id);
	parent.removeChild(child);
}

Code :

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

1
2
3
4
5
6
 
<table id="ligne_serveur" style="width:100%">
							</table>
 
							<p>
							<input type="button" value="+" onclick="AddChamp()" />

[SpaceFrog]

J'aurais tout basé sur les id nommés rationnellement et avec une syntaxe crossbrowser :

Code :

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

tr.id='tr_'+nb_lignes;

par expérience les "ça à l'air de marcher" ... ben ça marche jusqu'a ce que ça tombe sur un navigateur ou une version ou ça marche pas ...