Ajout / Suppresion de champs

Version imprimable

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:

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:

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

Citation:

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

07/01/2010, 12h25
vermine

Rows Rolls
Bonjour,

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

1 2 d.getElementsByTagName('tr')
ne fonctionne pas, vous pouvez essayer (une fois que vous aurez une table):
Code:

1 2 d.rows;
07/01/2010, 12h32
sebhm

ce post devrait t'interesser
07/01/2010, 14h14
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
07/01/2010, 14h17
vermine

A Taaaaable! Mimi, il est 8h... Mais t'avais dit qu'on mangerait des Knaaackiii

Le div à beau être dans une table, il n'empêche qu'on attache pas des <tr> à un div mais à une <table>. ;)
07/01/2010, 14h30
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)
07/01/2010, 14h36
vermine

And you wash, wash, wash. Threeee tiiime
Hé bien... Pour différencier vos <tr>, vous pouvez leur ajouter un attribut:
Code:

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:

1 2 3 4 5 var liste_tr = maTable.rows; if(liste_tr[0].getAttribute("att1") != null) alert("Youpiiiie");
Enfin, j'espère. :D

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

Sinon, faites plusieurs tables ?

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:

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

07/01/2010, 15h38
vermine

:-/
D'abord, il y a ceci:
Code:

1 2 3 4 d.removeChild(child); // au lieu de parent.removeChild(child);
Ensuite, je ne suis pas certain que ceci soit correcte:
Code:

1 2 tr.setAttribute('id','tr_'+nb_lignes);
J'aurai plutôt tendance à faire:
Code:

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. :)

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:

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:

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

07/01/2010, 15h50
SpaceFrog

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

Code:

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