Calcul d'une somme automatique dans un tableau html

**onesat** · 16/08/2014, 20h27

Bonjour la communauté,
Voilà, je dispose d’un tableau à 4 colonnes. Et chaque cellule de la 4ème colonne du tableau est occupée par une zone de texte. Et je précise également que les lignes du tableau varient suivant le résultat d’une requête.
Voici le code php de ma page :

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
$server="localhost";
$user="root";
$pass="";
$db="mapharmaciedb";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base');
//Requête
$sql3='SELECT nom_prod, pua,qtite_stoc,q_prod FROM `produits`
		LEFT JOIN `mapharmaciedb`.`vendre_achats` ON `vendre_achats`.`id_prod` = `produits`.`id_prod` WHERE num_vent="'.$_GET['isin'].'"';
	$exec3=mysql_query($sql3);
	$erreur3=mysql_error(); print $erreur3;
 
<table border='1' width="100%">
				<tr>
					<th><?php echo $_GET['isin']; ?></th><th colspan='3'></th>
				</tr>
				<tr>
					<th>Produits</th><th>Quantité</th><th>Prix Unitaire</th><th border="0">Total</th>
					<?php   
                                        $nb = 0;
                                        while($resul3=mysql_fetch_assoc($exec3)){
                                        $nb =$nb+1  ?>
				<tr><td><?php echo $resul3['nom_prod']; ?></td>
				<td><?php echo $resul3['q_prod']; ?></td>
				<td><?php echo $resul3['pua']; ?></td>
				<td><input type='text' id="montant" value='<?php echo $resul3['pua']*$resul3['q_prod']; ?>'></td></tr>";
							<?php
                                                        }
                                                ?>	
				</tr>
			</table>
			<h4 style="float:right;">Montant total :<input type="text" id="montanttotal" onClick="calculTotal();"></h4>

Voici mon code JavaScript:

Code :

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

1
2
3
4
5
6
7
8
9
<script language="javascript">
function calculTotal(){
	var nbLignes = document.getElementById("tab").rows.length;
	document.getElementById('montanttotal').value = 0;
	for (i=1;i<nbLignes;i++){
		document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value); 
	}
}
</script>

Et quand je clic dans le champ ayant pour id montanttotal rien ne se passe !
Si quelqu’un pouvait m’aider ! Merci à l’avance !

**sekaijin** · 17/08/2014, 11h09

Merci de lire la charte du forum et de ne poster que du HTML et du JS pas de PHP ASP C C++ ...

de plus je ne vois pas l'intérêt de mettre une fonction JS pour faire le calcul du total alors que le tableau est entièrement généré par PHP
il suffit de calculer le total en PHP.

Merci donc si tu veux de l'aide JS d'ouvrir ton navigateur et faire "afficher la source"
et de nous poster ce qu'il y a dans le navigateur.

Encore une fois ce n'est pas pour fliquer ou em@der les membre du forum mais pour fournir la meilleure aide possible.
Le Javascript s'exécute dans le navigateur et s'appuis sur le code HTML présent dans le navigateur.
Le code côté serveur ne sert à rien pour debogger un code JS. seul le code JS le contenu de la page et les données échangée avec le serveur permettent ce travail.

A+JYT

**onesat** · 17/08/2014, 15h20

Comme le php posait problème voici mon simplifié sans php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form name="bibi">
<table border=1>
<tr>
	<td>Produits</td><td>Quantité</td><td>Prix Unitaire</td><td>Total</td>
</tr>
<tr>
	<td>ACIDAC 300MG B/14 CP</td><td>2</td><td>83050</td><td><input type='text' id="montant" value='166100'></td>
</tr>
<tr>
	<td>Artequin 600/750 AD CP</td><td>3</td><td>78400</td><td><input type='text' id="montant" value='235200'></td>
</tr>
</table>
</form>
<h4 style="float:right;">Montant total :<input type="text" id="montanttotal" onClick="calculTotal();"></h4>

Et voici le JavaScript:

Code :

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

1
2
3
4
5
6
7
function calculTotal(){
	var nbLignes = document.getElementById("tab").rows.length;
	document.getElementById('montanttotal').value = 0;
	for (i=1;i<nbLignes;i++){
		document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value); 
	}
}

Je veux calculée la somme totale de la colonne Totale sur clic dans le champ id="montanttotal"

**honizukaz** · 17/08/2014, 16h20

Ton code est correct (mais très peu performant), pour le faire fonctionner tu dois juste ajouter l'id du tableau (tab) et modifier les id des input en : id="montant1", id="montant2"...

Si je parle de manque de performance c'est que tu réécris à chaque passage dans le for la variable. Sur un gros tableau ça pourrait se ressentir.
Je te propose une approche différente :

Code :

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

1
2
3
4
5
6
7
8
9
 
function calculTotal(){
	var all_input = document.getElementById("tab").getElementsByTagName("input");
    var total = 0;
	for (i=0;i<all_input.length;i++){
		total = total + parseFloat(all_input[i].value); 
	}
    document.getElementById("montanttotal").value = total;
}

Qui marchera tant que les input dans le tableau sont tous à additionner.
Au passage : ici plus besoin de mettre des id dans tes inputs.
Tu peu retrouver le code fonctionnel ici : http://jsfiddle.net/xvznbwpr/4/ (d'où l'utilité de mettre l'html pur)

**onesat** · 17/08/2014, 16h52

Thanks!

**onesat** · 17/08/2014, 17h08

Ouf même mon premier code répondait normalement! J'ai seulement oublier de mettre l'attribut id="tab" dans la balise <table>
Ce qui revient à ceci:

Code :

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

1
2
3
4
5
6
7
8
9
<script language="javascript">
function calculTotal(){
	var nbLignes = document.getElementById("tab").rows.length;
	document.getElementById('montanttotal').value = 0;
	for (i=1;i<nbLignes;i++){
		document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value); 
	}
}
</script>

Et

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
 
$server="localhost";
$user="root";
$pass="";
$db="mapharmaciedb";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base'); 
//Requete sur la table vendre_achats
	$sql3='SELECT nom_prod, pua,qtite_stoc,q_prod FROM `produits`
		LEFT JOIN `mapharmaciedb`.`vendre_achats` ON `vendre_achats`.`id_prod` = `produits`.`id_prod` WHERE num_vent="'.$_GET['isin'].'"';
	$exec3=mysql_query($sql3);
	$erreur3=mysql_error(); print $erreur3;
<div id="boite">
	<fieldset><legend>Formulaire de vente</legend>
			<?php echo '<p>'.$erreurAffichage.'</p>';               ?>
		<form name="formvente" method="POST" action="/mapharmacie/includes/verif_add_vente.php">
			<select name="nprod">
				<option>-- Sélectionner un produit --</option>
					<?php
                                                while($resultat=mysql_fetch_assoc($execution)){
                                                        echo"<option value='".$resultat['id_prod']."'>".$resultat['nom_prod']."</option>";
                                                }
                                        ?>								
			</select>&nbsp;&nbsp;Quantité: <input type="text" value="" size="5" name="quantite">
 
			<input type="hidden" value="<?php echo $_GET['isin']; ?>" size="5" name="numerecu">
 
			<select name="nclient">
				<option>-- Sélectionner un Client --</option>
					<?php
                                                while($resul1=mysql_fetch_assoc($exec1)){
                                                        echo"<option value='".$resul1['id_cl']."'>".$resul1['prenom_cl']."&nbsp;&nbsp;".$resul1['nom_cl']."</option>";
                                                }
                                        ?>								
			</select>&nbsp;&nbsp;
 
			<select name="tvente">
				<option value='cache'>-- Type de vente --</option>
				<option>Chèque</option>
				<option>Crédit</option>
				<option>Entreprise</option>
			</select>
 
			&nbsp;&nbsp;<input type="submit" name="ajouter" value="Ajouter">&nbsp;&nbsp;
			</form>
			<form name='bibi'>
			<span><a href="" title="Ajouter un nouveau produit">Nouveau produit</a></span></span>
			<p></p>
			<table border='1' width="100%" id="tab">
				<tr>
					<th><?php echo $_GET['isin']; ?></th><th colspan='3'></th>
				</tr>
				<tr>
					<th>Produits</th><th>Quantité</th><th>Prix Unitaire</th><th border="0" colspan=2>Total</th>
					<?php   
                                        $nb = 0;
                                        while($resul3=mysql_fetch_assoc($exec3)){
                                        $nb =$nb+1  ?>
				<tr><td><?php echo $resul3['nom_prod']; ?></td>
				<td><?php echo $resul3['q_prod']; ?></td>
				<td><?php echo $resul3['pua']; ?></td>
				<td><input type='text' id="montant<?php echo $nb;?>" value='<?php echo $resul3['pua']*$resul3['q_prod']; ?>'></td><td><a href="" title="Annuler"><img src="/mapharmacie/images/supprimer.gif"></a></td></tr>
							<?php
                                                        }
                                                ?>	
				</tr>
			</table></form>
			<h4 style="float:right;">Montant total :<input type="text" id="montanttotal" onClick="calculTotal();"></h4>
 
	</fieldset>
</div>
</div>

Calcul d'une somme automatique dans un tableau html

JavaScript

Discussions similaires

Partager

Partager