Discussion :

[Argol]

Bonjour
J'ai un tableau avec 6 colonnes et les lignes que je peux creer a l'aide d'un bouton ajouter produit.
Dans les 5 premiers colonnes j'ai des input type=text et dans la derniere j'ai une fonction qui me calcule un total qui es egal a la quantite* PU-remise

Le gros probleme est que si je decide d'ajouter 2 lignes sans remplir la colonne quantite PU et remise et je l'ajoute par la suite alors sa pose probleme puisque j'ai un compteur qui s'incremente a chaque fois que j'ajoute une ligne et j'affiche le total au numero de ce compteur
Il me faut donc un moyen pour afficher ce total ds la ligne courante c'est à dire ou je fais mes onKeyUp
Merci!
Je sais pas si c'est clair voila le code

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
 
var compteur=0;
function AddRow(){
if (document.getElementById("qté_"+compteur).value!="")
{
	compteur++;
    var newRow = document.getElementById('table').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = ' <input type="text" name="ref_'+compteur+'"/>';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = ' <input type="text" name="designation_'+compteur+'" />';
	 newCell = newRow.insertCell(2);
    newCell.innerHTML = ' <input type="text" name="qte_'+compteur+'" id="qté_'+compteur+'" onKeyup="check();" />';
	 newCell = newRow.insertCell(3);
    newCell.innerHTML = ' <input type="text" name="pu_'+compteur+'" id="prix_'+compteur+'"  onKeyup="check();"/>';
	 newCell = newRow.insertCell(4);
    newCell.innerHTML = ' <input type="text" name="remise_'+compteur+'" id="remis_'+compteur+'" onKeyup="check();" />';
	 newCell = newRow.insertCell(5);
 
    newCell.innerHTML = ' <span id="result_'+compteur+'"></span>';
	}
	else
	{
	window.alert("Veuillez saisir votre produit avant d'en ajouter un autre")
	}

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 check() {
 
          var qte = document.getElementById("qté_"+compteur).value;
 
         var prix = document.getElementById("prix_"+compteur).value;
 
         var remise = document.getElementById("remis_"+compteur).value;
 
          var result = document.getElementById("result_"+compteur);
 
 
 
          if(qte=='')
 
              qte = 0;
 
          if(prix == '')
 
              prix = 0;
 
			    if(remise == '')
 
              remise = 0;
 
          result.innerHTML = qte * prix-remise;
 
      }

[Bovino]

Tout d'abord, mettre des accents pour les id, tu devrais oublier rapidement !
Ensuite, c'est dommage d'utiliser innerHTML pour créer tes input. Tu ferais mieux de passer par des méthodes plus propres, comme

Code :

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

document.createElement('input');

puis ajouter des propriétés.
Ceci aurait comme avantage de pouvoir transmettre comme propriété de tes input la valeur de compteur et donc de la récupérer par la suite, par exemple :

Code :

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

1
2
3
4
5
6
7
var input1 = document.createElement('input');
input1.value = 'Valeur';
...
input1.ref = compteur;
input1.onkeyup = function(){
    check(this.ref);
}

puis :

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
function check(reference) {
 
          var qte = document.getElementById("qté_"+reference).value;
 
         var prix = document.getElementById("prix_"+reference).value;
 
         var remise = document.getElementById("remis_"+reference).value;
 
          var result = document.getElementById("result_"+reference);
 
 
 
          if(qte=='')
 
              qte = 0;
 
          if(prix == '')
 
              prix = 0;
 
			    if(remise == '')
 
              remise = 0;
 
          result.innerHTML = qte * prix-remise;
 
      }

[SpaceFrog]

en passant

Code :

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

(this.parentNode.parentNode)

en paramètre de ta fonction tu recupère le tr (la ligne) et du coup tu recupères facileemnt les td enfants et leur contenu et le value du total

[Argol]

merci !
j'ai mis tout sa correctement et sa marche.
Petite orientation pour la suite svp
Comment puis je faire le total des totaux c'est à dire d'une colonne entière ?

[Bovino]

Avec une boucle sur les id du total.

Code :

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

1
2
3
for(var i=0; i<compteur; i++){
    total += parseInt(document.getElementById('result_'+i).value,10);
}

[Argol]

Merci, mais la question est comment je fais pour lancer cette fonction aprés que la case du total d'une ligne soit calculé ?
en gros ce que je cherche c'est la méthode qui lance la fonction lorsque un champ est mis à jour!

Code :

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

1
2
3
4
input5.onkeyup = function(){
    check(this.ref);
	total();
	}

Code :

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

1
2
3
4
5
6
7
8
9
 
function total()
{
 var total = document.getElementById("total");
 
for(var i=0; i<compteur; i++){
    total += parseInt(document.getElementById('result_'+i).value,10);
}
}

j'ai essayer de faire calculer le total aprés chaque onkeyup
mais sa marche pas

[Bovino]

Tu ne peux pas additionner des légumes et des fruits ! Ni des éléments HTML et des entiers !

Code :

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

1
2
3
4
5
6
7
8
9
10
function total()
{
 var total = 0;
 
for(var i=0; i<compteur; i++){
    total += parseInt(document.getElementById('result_'+i).value,10);
}
document.getElementById("total").value = total;  // Si ton élément total est un input
document.getElementById("total").appendChild(document.createTextNode(total);  // Si ton élément total est un span ou un div
}

Bon, le createTextNode peut être remplacé par innerHTML, mais autant passer par les méthodes du DOM !

[Argol]

Merci j'ai effectivement un SPAN
et j'arrive a afficher quelque chose c'est deja sa
NaNNaNNaNNaNNaN
mais probleme not a number !

[Bovino]

Code :

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

1
2
3
4
5
6
7
8
9
function total()
{
 var total = 0;
 
for(var i=0; i<compteur; i++){
    total += parseInt(document.getElementById('result_'+i).value.replace(/\D/g,''),10);
}
document.getElementById("total").appendChild(document.createTextNode(total));  // Si ton élément total est un span ou un div
}

J'avais oublié de fermer une parenthèse

[Argol]

oui, effectivement mais ce problème de parenthèse bloquer mon programme cela n'empêche que sa corrige pas le problème du NoN :s

[Bovino]

C'est bien pour ça que j'ai rajouté un replace()

[Argol]

ok, merci mais result_ est un span et il y a pas de .value dans les span :s

[Matthieu2000]

Code :

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

document.getElementById('result_'+i).innerHTML

[Argol]

le probleme c'est que il faut que le variable soit un entier parce que la sa m'affiche des suites de nombre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function total()
{
 var total = 0;
 
for(var i=0; i<compteur; i++){
total += document.getElementById('result_'+i).innerHTML;
 
 
}
document.getElementById("total").appendChild(document.createTextNode(total));  // Si ton élément total est un span ou un div
//document.getElementById("total").innerHTML = monTotal;
 
}

[Argol]

sinon :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function total()
{
 var total = 0;
 
for(var i=0; i<compteur; i++){
total += parseInt(document.getElementById('result_'+i).innerHTML,10);
 
 
}
document.getElementById("total").appendChild(document.createTextNode(total));  // Si ton élément total est un span ou un div
//document.getElementById("total").innerHTML = monTotal;
 
}

Resultat : NaN

[SpaceFrog]

Code :

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

total += document.getElementById('result_'+i).innerHTML*1;

ou

Code :

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

total += parseInteger(document.getElementById('result_'+i).innerHTML);

[Argol]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function total()
{
 var monTotal = 0;
 
for(var i=0; i<compteur; i++){
monTotal += parseInt(document.getElementById('result_'+i).innerHTML,10);
 
 
}
 
document.getElementById("total").innerHTML = monTotal;
 
}

voiloa qui fonctionne :=)

[Bovino]

Code :

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

total += parseInt(document.getElementById('result_'+i).innerHTML.replace(/\D/g,''),10);

[Argol]

Salut !
c'est encore moi
lol
Bon je m'essaye a la suppression par ligne choisit maintenant
voila ma fonction :

Code :

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

1
2
3
4
5
6
function suppression(id)
{
Thetable = document.getElementById("table");
Thetr = document.getElementById(id);
 Thetable.removeChild(Thetr);
 }

J'essaye par un exemple simple et concret sans me perdre dans les compteurs pour commencer : ce qui me donne la table :

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
<table border="solid" align="center" id="table">
   <tr >
      <td>
      &nbsp&nbsp&nbsp&nbsp REF &nbsp&nbsp&nbsp&nbsp
       </td>
       <td>
    &nbsp&nbsp&nbsp&nbsp DESIGNATION &nbsp&nbsp&nbsp&nbsp            
       </td>
      <td>&nbsp&nbsp&nbsp&nbsp QTE &nbsp&nbsp&nbsp&nbsp
      </td>       
       <td>&nbsp&nbsp&nbsp&nbsp PU HT EN EURO &nbsp&nbsp&nbsp&nbsp
      </td>   
      <td>&nbsp&nbsp&nbsp&nbsp Remise &nbsp&nbsp&nbsp&nbsp
      </td>   
       <td>&nbsp&nbsp&nbsp&nbsp TOTAL HT EN EURO  &nbsp&nbsp&nbsp&nbsp
      </td>   
 </tr>
 <tr id="0">
     <td>
	<input type="text" name="ref_0" >
     </td>
 
     <td>
     <input type="text" name="designation_0"/>
    </td>
 
     <td>      
	  <input type="text" name="qte_0" id="qté_0" onKeyup="check(0)"; onchange="total()"; onkeyup="total()";/>
     </td>       
 
     <td>
     <input type="text" name="pu_0" id="prix_0" onKeyup="check(0);" onchange="total()"; onkeyup="total()";/>
     </td>   
 
     <td>
	 <input type="text" name="remise_0" id="remis_0" onKeyup="check(0);"onchange="total()"; onkeyup="total()";/>
     </td>   
 
     <td>       
     <span id="result_0" </span>
    </td>   
 
	 <td>
	 <input type="button" value="Supprimer un produit" onclick="suppression(0)"; > 
	</td>
 
 </tr>
 
 </table>

J'appelle supression(0) avec id=0 et l'id du TR=0
mais malheuresement sa ne marche pas :s


Merci de votre aide

[Bovino]

Code :

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

onclick="suppression('0')"

Un id est de type chaîne, l'argument de ta fonction est un entier...
Ceci dit, '0' n'est pas un id valide... les id doivent commencer par une lettre ou underscore.