Suppression d'une ligne dans un tableau

**guigui69** · 20/11/2008, 08h32

bonsoir à tous,

j'ai une page web ou il y a du javascript pour la création d'un taleau html. il fonctionne mais je voudrait arrivé a supprimer la dernier ligne de mon tableau.

En fait je remplis les case input, je clique sur ajouter et cela créer un tableau html.

Mais je voudrais qu'au depart il supprime la derniere ligne ( cette ligne est créé plus bas pour faire la somme du colonne.)

J'ai essayé ceci:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
 
ar EMB =
 
    {
 
        nbEmballage : 0,
 
        idEmballage : 0,
 
        ajouter : function ()
 
        {
 
		if (EMB.nbEmballage == 0)
            {
            }
		else
		{
		var tbody = document.getElementById('liste-emballage');
		row = document.getElementById("ajout").rows.length;
		alert(row);
		document.getElementById('ajout').deleteRow(row);
		}
		            var e = document.getElementById('emballage');
            var qe = document.getElementById('qte_emb');
			var pu = document.getElementById('pu_emb');
			var total = document.getElementById('pu_emb').value.replace(/(,)/gi, ".") * document.getElementById('qte_emb').value.replace(/(,)/gi, ".");
            var tbody = document.getElementById('liste-emballage');
            if (EMB.nbEmballage == 0) { tbody.deleteRow(0); }
            var tr = tbody.insertRow(tbody.rows.length);
            var td1 = tr.insertCell(0);
            var td2 = tr.insertCell(1);
            var td3 = tr.insertCell(2);
			var td4 = tr.insertCell(3);
			var td5 = tr.insertCell(4);
 
            // Insertion produit
 
            var emb = document.createTextNode(e.options[e.selectedIndex].text);
            var embInput = document.createElement('input');
            embInput.setAttribute('type', 'hidden');
            embInput.setAttribute('name', 'emballage[' + EMB.idEmballage + '][0]');
            embInput.setAttribute('value', e.options[e.selectedIndex].value);
            td1.appendChild(emb);
            td1.appendChild(embInput);
 
            // Insertion quantité
 
            var embqtte = document.createTextNode(qe.value);
            var embqtteInput = document.createElement('input');
            embqtteInput.setAttribute('type', 'hidden');
            embqtteInput.setAttribute('name', 'qte[' + EMB.idEmballage + '][1]');
            embqtteInput.setAttribute('value', qe.value.replace(/(,)/gi, "."));
            td2.appendChild(embqtte);
            td2.appendChild(embqtteInput);
 
                        // Insertion prix
 
            var embprix = document.createTextNode(pu.value);
            var embprixInput = document.createElement('input');
            embprixInput.setAttribute('type', 'hidden');
            embprixInput.setAttribute('name', 'pu[' + EMB.idEmballage + '][2]');
            embprixInput.setAttribute('value', pu.value.replace(/(,)/gi, "."));
            td3.appendChild(embprix);
            td3.appendChild(embprixInput);
 
			// Bouton supprimer
 
            var btnSupprimer = document.createElement('input');
            btnSupprimer.setAttribute('type', 'button');
            btnSupprimer.setAttribute('value', 'Supprimer');
            btnSupprimer.onclick = EMB.supprimer;
            td4.appendChild(btnSupprimer);
 
			// Total par produit:
			//alert ('test'+total);
			//var embtotal = document.getElementById('pu_emb').value.replace(/(,)/gi, ".") * document.getElementById('qte_emb').value.replace(/(,)/gi, ".");
            var embtotal = document.createTextNode(total);
			var embtotalInput = document.createElement('input');
            embtotalInput.setAttribute('type', 'hidden');
            embtotalInput.setAttribute('name', 'total[' + EMB.idEmballage + '][3]');
            embtotalInput.setAttribute('value', total);
 
			td5.appendChild(embtotal);
            td5.appendChild(embtotalInput);
 
 
			//Calcul Complet total
			var tr =  tbody.insertRow(tbody.rows.length);
			var td1 = tr.insertCell(0);
			var td2 = tr.insertCell(1);
			var total = document.createTextNode('test');
			td1.setAttribute('colSpan', 4);
			td1.appendChild(total);
			//var montanttotal = 0;
			//var nbLignes3 = document.getElementById("ajout").rows.length - 2;
			//for (a=1;a<=nbLignes3;a++)
			//{
			//montanttotal = montanttotal + parseFloat(document.getElementById('total[' + a + '][3]').value);
           // }
			//alert ('montanttotal'+motanttotal);
			//var total = document.createTextNode(totaltotal);
			//var totalInput = document.createElement('input');
           // totalInput.setAttribute('type', 'hidden');
           // totalInput.setAttribute('name', 'total');
           // totalInput.setAttribute('value', total);
 
			//td2.appendChild(total);
            //td2.appendChild(totalInput);	
 
 
 
			// Inc nbProduits et id
            EMB.nbEmballage++;
            EMB.idEmballage++;
 
        },
 
        supprimer : function ()
 
        {
 
            var tbody = document.getElementById('liste-emballage');
            var row = this.parentNode.parentNode;
            var index = 0;
            while (row = row.previousSibling)
            {
                if (row.tagName) { index++; }
            }
 
            tbody.deleteRow(index);
            EMB.nbEmballage--;
            if (EMB.nbEmballage == 0)
            {
                var tr = tbody.insertRow(0);
                var td = tr.insertCell(0);
                td.setAttribute('colSpan', 5);
                td.appendChild(document.createTextNode('Aucun emballage'));
            }
        },
 
        check : function ()
        {
            if (EMB.nbEmballage < 1) alert('Il faut au moins 1 emballage');
            return EMB.nbEmballage > 0;
        }
    };

uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)
[Break on this error] document.getElementById('ajout').deleteRow(row);

Ou Est je commis une erreur?
le code erreur est celui ci (c'est celui qui doit faire la suppression de la dernière ligne):

Code :

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

1
2
3
4
5
6
 
var tbody = document.getElementById('liste-emballage');
      row = document.getElementById("ajout").rows.length;
      alert(row);
      document.getElementById('ajout').deleteRow(row);
      }

Merci

guigui69

**Bovino** · 20/11/2008, 08h48

C'est l'indice qui n'est pas bon... length commence à compter à 1 mais les indices commencent à 0 !

Code :

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

document.getElementById('ajout').deleteRow(row-1);

**guigui69** · 20/11/2008, 12h54

Merci pour ta réponse.

J'ai encore un petit souci , mais que j'arrive pas a comprendre.

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
 
// Total par produit:
			//alert ('test'+total);
			//var embtotal = document.getElementById('pu_emb').value.replace(/(,)/gi, ".") * document.getElementById('qte_emb').value.replace(/(,)/gi, ".");
            var embtotal = document.createTextNode(total);
			var embtotalInput = document.createElement('input');
            embtotalInput.setAttribute('type', 'hidden');
            embtotalInput.setAttribute('name', 'total[' + EMB.idEmballage + '][3]');
			embtotalInput.setAttribute('id', 'total[' + EMB.idEmballage + '][3]');
            embtotalInput.setAttribute('value', total);
 
			td5.appendChild(embtotal);
            td5.appendChild(embtotalInput);
			alert('nom:'+embtotalInput.name);
			alert('total:'+embtotalInput.value);
			// Inc nbProduits et id
            EMB.nbEmballage++;
            EMB.idEmballage++;
 
			//Calcul Complet total
			var tr =  tbody.insertRow(tbody.rows.length);
			var td1 = tr.insertCell(0);
			var td2 = tr.insertCell(1);
			var total = document.createTextNode('test');
			td1.setAttribute('colSpan', 4);
			td1.appendChild(total);
			//var document.getElementById('total[0][3]').value = 0;
			var montanttotal = 0;
			var nbLignes3 = document.getElementById("ajout").rows.length;
			alert ('nbre:'+nbLignes3);
			for (a=0;a<=nbLignes3;a++)
			{
			alert ('nom:'+embtotalInput.name+'valeur==>'+document.getElementById('total['+ a +'][3]').value);
			montanttotal = montanttotal + parseFloat(document.getElementById('total[' + a + '][3]').value);
 
			}
			alert ('montanttotal'+motanttotal);
			//var total = document.createTextNode(totaltotal);
			//var totalInput = document.createElement('input');
           // totalInput.setAttribute('type', 'hidden');
           // totalInput.setAttribute('name', 'total');
           // totalInput.setAttribute('value', total);
 
			//td2.appendChild(total);
            //td2.appendChild(totalInput);

A ce niveau:

alert ('nom:'+embtotalInput.name+'valeur==>'+document.getElementById('total['+ a +'][3]').value);

il me resort qu'il est null alors qu'il m'affiche correctement le motant dans l'alerte. Et ce la doit empecher de réaliser la suite du calcul.

Quel erreur j'ai commise? Je n'arrive pas a comprendre

Merci

guigui69

**SpaceFrog** · 20/11/2008, 13h00

visiblement un souci de quotes dans l'alert ..

**Bovino** · 20/11/2008, 13h16

Essaye :

Code :

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

1
2
3
4
5
6
7
for (a=0;a<=nbLignes3;a++)
			{
			var elt_a = 'total['+a+'][3]';
			alert ('nom:'+embtotalInput.name+'valeur==>'+document.getElementById(elt_a).value);
			montanttotal = montanttotal + parseFloat(document.getElementById(elt_a).value);
 
			}

**guigui69** · 20/11/2008, 15h16

Merci pour vos réponses.

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
 
			// Total par produit:
			//alert ('test'+total);
			//var embtotal = document.getElementById('pu_emb').value.replace(/(,)/gi, ".") * document.getElementById('qte_emb').value.replace(/(,)/gi, ".");
            var embtotal = document.createTextNode(total);
			var embtotalInput = document.createElement('input');
            embtotalInput.setAttribute('type', 'hidden');
            embtotalInput.setAttribute('name', 'total[' + EMB.idEmballage + '][3]');
			embtotalInput.setAttribute('id', 'total[' + EMB.idEmballage + '][3]');
            embtotalInput.setAttribute('value', total);
 
			td5.appendChild(embtotal);
            td5.appendChild(embtotalInput);
			alert('nom:'+embtotalInput.name);
			alert('total:'+embtotalInput.value);
			// Inc nbProduits et id
            EMB.nbEmballage++;
            EMB.idEmballage++;
 
			//Calcul Complet total
			var tr =  tbody.insertRow(tbody.rows.length);
			var td1 = tr.insertCell(0);
			var td2 = tr.insertCell(1);
			var total = document.createTextNode('test');
			td1.setAttribute('colSpan', 4);
			td1.appendChild(total);
			//var document.getElementById('total[0][3]').value = 0;
			var montanttotal = 0;
			var nbLignes3 = document.getElementById("ajout").rows.length;
			alert ('nbre:'+nbLignes3);
			for (a=0;a<=nbLignes3;a++)
			{
			var elt_a = 'total['+a+'][3]';
			alert ('nom:'+embtotalInput.name+'valeur==>'+document.getElementById(elt_a).value);
			montanttotal = montanttotal + parseFloat(document.getElementById(elt_a).value);
 
 
			}
			alert ('montanttotal'+motanttotal);
			//var total = document.createTextNode(totaltotal);
			//var totalInput = document.createElement('input');
           // totalInput.setAttribute('type', 'hidden');
           // totalInput.setAttribute('name', 'total');
           // totalInput.setAttribute('value', total);
 
			//td2.appendChild(total);
            //td2.appendChild(totalInput);

Mais il y a toujours le problème:

firebug:
document.getElementById(elt_a) is null
[Break on this error] alert ('nom:'+embtotalInput.name+'val...'+document.getElementById(elt_a).value);

**Bovino** · 20/11/2008, 17h27

Mouarf... j'avais pas vu... Elle est où la ligne où tu affectes un id à tes éléments ???

EDIT : Re-mouarf !!! Mon opticien va être content, va falloir que je lui achète des lunettes !

Code :

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

embtotalInput.setAttribute('id', 'total[' + EMB.idEmballage + ']

**SpaceFrog** · 20/11/2008, 17h29

j'ai bien peur aussi que ça ne passe pas ça :

Code :

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

 embtotalInput.setAttribute('value', total);

**guigui69** · 24/11/2008, 14h35

Bonjour Merci pour ces informations,

J'ai trouver mon erreur pour la demande plus haut.

Maintenant j'ai un petit soucis, pour qu'il réalise le calcul.

J'alimente mon tableau etc...
Nom|Qte|Prix U|total|Bouton Supprimer

Quand je clic sur le bouton supprimer la ligne (cela fonctionne) mais le probleme c'est que je demande le calcul de la somme du tableau.

Probleme:

exemple je met 5 éléments dans mon tableau (avec ID1 ID2... )
Si je supprime le 3eme éléments, les informations dans mon tableau sera donc ID1 ID2 ID4 ID5.

Et comme apparait je demande le cacul, de chaque ID en comptant le nombre de ligne de mon tableau, il va faire

ID1=X1*Y1
ID2=X2*Y2
ID3 Erreur

J'ai donc penser a modifier l'id contenue dans mon tableau:

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
 
     supprimer : function ()
 
        {
		////
 
			////
            var tbody = document.getElementById('liste-emballage');
            var row = this.parentNode.parentNode;
			//alert (row.previousSibling);
            var index = 0;
			var index2 = 0;
            while (row = row.previousSibling)
            {
                if (row.tagName) { index++; }
            }
			/////////
			/////
            tbody.deleteRow(index);
            EMB.nbEmballage--;
 
////Ci dessous le soucis
			alert ('index est:'+index);
			var row2 = this.parentNode.parentNode;
			while (row2 = row2.nextSibling)
			{
			tmp = index + 1;
			tmp2 = index - 2;
			alert ('tmp1->'+tmp);
			alert ('tmp2->'+tmp2);
			document.getElementById('emballage[' + tmp + '][0]').value = document.getElementById('emballage[' + tmp2 + '][0]').value 
			}

Je voudrait quand fonction de ligne ou on a clic sur supprimer cela modifie les ID suivant des élement suivant (nextSibling) mais cela ne fonctionne pas.

Quel est mon erreur? Est je pris le problème dans le mauvais sans?

Merci d'avance

guigui69

**SpaceFrog** · 24/11/2008, 14h50

sutout ne pas utiliser nextSibling !!!

suffirait de tester if document.getElementById('ID3')

**RomainVALERI** · 24/11/2008, 17h51

Envoyé par guigui69

J'ai trouver mon erreur pour la demande plus haut.

Heu, c'est pas pour raler, hein... mais : comme tout sujet de forum, en plus de donner un coup de main à son auteur, il peut parfois aussi aider d'autres personnes ayant un problème similaire à le résoudre... mais uniquement quand on dit comment on s'en est sorti....

@SpaceFrog : quel est le problème avec nextSibling ? oO Tu veux dire que ce n'est pas ce qu'il faut ici ou bien il y a un souci avec cette propriété en général ?

**Bovino** · 24/11/2008, 17h56

quel est le problème avec nextSibling ? oO Tu veux dire que ce n'est pas ce qu'il faut ici ou bien il y a un souci avec cette propriété en général ?

Il y a un souci avec cette propriété dans la mesure où les navigateurs n'interprètent pas le DOM de la même façon.
Pour certains, les retours chariots et autres joyeusetés sont des noeuds et pas pour d'autres donc à moins de faire les tests correspondants, tu n'es pas sûr du noeud que tu atteins (idem pour firstChild) !

**RomainVALERI** · 24/11/2008, 18h08

OK merci Bovino je me méfierai... ^^

**guigui69** · 27/11/2008, 18h47

Oui désolé en fait le probleme etait du a l'initialisation du tableau je commencait a 1 alors que je devrait commencer a 0 donc il fesait un tours en trop

Même si je met une condition j'aurai toujours un problème de calcul. Je m'explique:

Je rentre 5 produits dans le tableau. Je supprime la ligne 3 ( ça cela fonctionne) mais quand il va calcul il va voir 4 lignes (ce qui est normale) et va faire calcul de ID1 puis ID2, ID3(en mettant la condition) puis pour finir ID4, alors qu'il me restera la ligne avec ID5 qui ne sera pas pris dedans.

Comment faire pour résoudre ce problème?

Merci

guigui69

Suppression d'une ligne dans un tableau

JavaScript

Discussions similaires

Partager

Partager