Discussion :

[madinadiouf]

Bonjour,

Je dispose
d'un tableau html comme ceci

Code html :

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

1
2
3
4
5
6
7
<table id="tableau">
<tr>
 <th>Article</th>
  <th>Quantité</th>
  <th>Prix unitaire</th>
 <th>Montant</th>
</tr>

je créée les lignes dynamiquement
je souhaite lords d'une saisie sur une cellule de colonne quantité, calculer la valeur de la cellule de colonne montant correspondant c'est à dire sur la mémé ligne que la quantité saisie.
Je sais pas comment le faire en javascript ?

[NoSmoking]

Bonjour,
et si tu prenais le temps de répondre à tes discussions en attente

• Envoyer un tableau html via ajax pour le récupérer en php
• Calcul automatique de deux champs liés

Nota : sujet maintes fois abordés sur le forum.

[madinadiouf]

Bonjour

Excuses. c'est fait.

[madinadiouf]

bonjour,

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
 
function ajouteLigne(tableID,e)
{
	e.preventDefault();
 
 
	var table = document.getElementById(tableID);
	 var ligne = table.insertRow(-1);
    var rowNumber = table.childNodes.length;
    var cell_article = ligne.insertCell(0);
	var cell_qte = ligne.insertCell(1);
	var cell_pu = ligne.insertCell(2);
 
	var cell_mtant = ligne.insertCell(3);
	var cell_sup = ligne.insertCell(4);
 
 
 
 
	 $.post(
			                                    'ok.php', // Un script PHP que l'on va créer juste après
			                                             {
 
			                                                      },
 
			                                             function(data){
 
 
						                                     // alert(data);
															  cell_article.innerHTML=data;
 
 
 
 
 
			                                        },
			                                           'text'
		                                           );
 
												   cell_qte.innerHTML='<input type="text"  name="quantite[]" oninput="cal(\''+tableID+'\',this)" size="12" />';
												   cell_pu.innerHTML='<input type="text" class="inputNum" name="prix_unitaire[]"    size="12"/>';
												   cell_mtant.innerHTML='<input type="text" name="montant[]"/>';
												   //cell_sup.innerHTML='<input type="button" onclick="supp_ligne(\''+tableID+'\',this);" value="Supprimer"/>';
												   cell_sup.innerHTML='<button onclick="supp_ligne(\''+tableID+'\',this);">Supprimer</button>'; 
 
 
}
 
function cal(tableID,elt)
	{
		var table = document.getElementById(tableID);
 
    var rowNumber = elt.parentNode.parentNode.rowIndex;
 
 
	}

mais j'arrive pas à extraire les valeurs de cellules de quantités et prix unitaire de la ligne mise à jour pour faire le calcul

[madinadiouf]

Bonjour,

J'ai réussi pour ceux qui sont intéressé.

Code html :

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

1
2
3
<input type="text"  name="quantite[]" onkeypress="return onlyNumberKey(event)" autocomplete="off"  oninput="cal(\''+tableID+'\',this)" size="12" />
<input type="text"  name="prix_unitaire[]" onkeypress="return onlyNumberKey(event)" oninput="cal(\''+tableID+'\',this)" autocomplete="off"   size="12"/>
<input type="text" name="montant[]" disabled="disabled" />

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function cal(tableID,elt)
	{
var refTab=document.getElementById(tableID) 
var rowindex=elt.parentNode.parentNode.rowIndex
  var row = refTab.rows[rowindex]; 
   var col_quantite = row.cells[1];
 var col_prixunitaire = row.cells[2]
    var col_montant = row.cells[3]
 var val_qtite=col_quantite.childNodes[0].value; 
 var val_pu=col_prixunitaire.childNodes[0].value; 
 col_montant.childNodes[0].value=val_qtite*val_pu;
 
 }

[NoSmoking]

J'ai réussi pour ceux qui sont intéressé.

c'est bien mais tu te complique la vie !

Tu n'as pas besoin de l'ID de la <table>, il suffit de récupérer le parent <tr> de ton <input> via la méthode closest().

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function cal(/*tableID,*/ elt) {
//  var refTab = document.getElementById(tableID)
//  var rowindex = elt.parentNode.parentNode.rowIndex
  var row = elt.closest("TR");//refTab.rows[rowindex];
  var col_quantite = row.cells[1];
  var col_prixunitaire = row.cells[2];
  var col_montant = row.cells[3];
  var val_qtite = col_quantite.firstElementChild.value;
  var val_pu = col_prixunitaire.firstElementChild.value;
  col_montant..firstElementChild.value = val_qtite * val_pu;
}

et tes <input> deviennent par exemple :

Code html :

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

<input type="text"  name="quantite[]" onkeypress="return onlyNumberKey(event)" autocomplete="off"  oninput="cal(this)" size="12" />

voilà il y aura déjà du mieux !