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 ?