Ecrire dans une cellule en connaissant le numéro de la ligne de la TABLE

Version imprimable

09/07/2021, 14h31
madinadiouf

Ecrire dans une cellule en connaissant le numéro de la ligne de la TABLE
Bonjour,

Je dispose
d'un tableau html comme ceci
Code:

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 ?
09/07/2021, 17h08
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.
09/07/2021, 17h36
madinadiouf

Bonjour

Excuses. c'est fait.

bonjour,

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

Bonjour,

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

Code:

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:

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;
 
 }

Citation:

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:

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:

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

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