Calculs sur un tableau Html créé en boucle

**feelwatt** · 25/07/2014, 02h23

Salut,
Je suis depuis quelques jours sur ce tableaux a tenté d'en faire la somme. en javascript et je n'arrive pas.
j'ai essayé parsint +getelement getelement*1 etc mais rien.

Les lignes sont incrémentées en php (sur un BD mySQL)

et donc ca marche une fois sur deux et ca concatène les totals HT et TTC.

C'est un truc tout bête j'imagine
le JS est en bas.

Qu'en pensez-vous ?

Code php :

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
<h1><a href="Page.php">Paga</a></h1>
<?php 
 
// LIGNES  
if (!ISSET($_SESSION['Lignes']))
	{
	$_SESSION['Lignes'] = 2; // Ici le sql
	for($i=1; $i < $_SESSION['Lignes']; $i++) {
		// Declaration des sessions
		if (!ISSET($_SESSION['Designation'.$i])) {$_SESSION['Designation'.$i] = '';}
		if (!ISSET($_SESSION['Unite'.$i])) {$_SESSION['Unite'.$i] = '';}
		if (!ISSET($_SESSION['Prix'.$i])) {$_SESSION['Prix'.$i] = '';}
		if (!ISSET($_SESSION['Quantite'.$i])) {$_SESSION['Quantite'.$i] = '';}
		if (!ISSET($_SESSION['MontantHT'.$i])) {$_SESSION['MontantHT'.$i] = '';}
	}
} 
echo '$_SESSION[= '. $_SESSION['Lignes'] . '<br>';
if (ISSET($_POST['Lignes'])) { // Ajouter ligne + declarer les variables
			$_SESSION['Lignes'] = $_SESSION['Lignes'] + $_POST['Lignes'];
			$nb_lignes_avant = $_SESSION['Lignes']; 
			$nb_lignes_apres = $_SESSION['Lignes'] + $_POST['Lignes'] + 7;
			for($i=$nb_lignes_avant - 1; $i < $nb_lignes_apres; $i++) {
				// Sessions
				if (!ISSET($_SESSION['Designation'.$i])) {$_SESSION['Designation'.$i] = '';}
				if (!ISSET($_SESSION['Unite'.$i])) {$_SESSION['Unite'.$i] = '';}
				if (!ISSET($_SESSION['Prix'.$i])) {$_SESSION['Prix'.$i] = '';}
				if (!ISSET($_SESSION['Quantite'.$i])) {$_SESSION['Quantite'.$i] = '';}
				if (!ISSET($_SESSION['MontantHT'.$i])) {$_SESSION['MontantHT'.$i] = '';}
		}
	}
	echo '<p id="i">' . $i . "</p>";
?>
<form action="page.php" method="post" enctype="multipart/form-data" name="Form" style="font-size:21px ">
<table id="tableau" style=" float:right; margin-right:121px" border="1">
  <tr>
    <td class="Doc_Tableau" width="293" style="text-align:left; width:293px; "></td>   
    <td class="Doc_Tableau" width="293" style="text-align:left; width:293px; ">D&eacute;signation</td>
    <td class="Doc_Tableau" width="89" style=" width:93px;" >Unit&eacute;</td>
    <td class="Doc_Tableau" width="97" style=" width:93px;">Prix</td>
    <td class="Doc_Tableau" width="95" style=" width:95px;">Quantit&eacute;</td>
    <td class="Doc_Tableau" width="119" style=" width:119px;">Montant HT </td>
  </tr>
<?php for($i=1; $i < $_SESSION['Lignes']; $i++)
{ ?>
  <tr class="Doc_Tableau">
    <td class="Doc_Tableau" style="text-align:left; width:293px; ">&nbsp;</td>
    <td class="Doc_Tableau" style="text-align:left; width:293px; "><?php echo "la " .  $i;?>
	<select name="Designation<?php echo $i;?>" style="font-size:19px;">
	  <option <?php if ($_SESSION['Designation'.$i]== 'AAA') {echo 'AAA';}?>>AAA</option>
	</select>
	</td>
<td class="Doc_Tableau" style=" width:93px;" ><input id="Unite<?php echo $i;?>" type="text" size="7" name="Unite<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Unite'.$i])) {echo $_SESSION['Unite'.$i];} ?>" > </td>
<td class="Doc_Tableau" style=" width:93px;"><input id="Prix<?php echo $i;?>"  type="text" size="7" name="Prix<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Prix'.$i])) {echo $_SESSION['Prix'.$i];} ?>" value="10" ></td>
<td class="Doc_Tableau" style=" width:95px;"><input id="Quantite<?php echo $i;?>"  type="text" size="7" name="Quantite<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['Quantite'.$i])) {echo $_SESSION['Quantite'.$i];} ?>" ></td>
<!--  -->
<td class="Doc_Tableau" style=" width:119px;"><input id="MontantHT<?php echo $i;?>"  type="text" size="7" name="MontantHT<?php echo $i;?>" onChange="change_valeur(<?php echo $i;?>)" value="<?php if (ISSET($_SESSION['MontantHT'.$i])) {echo $_SESSION['MontantHT'.$i];}?>" ></td>
</tr>
  <?php } ?>
</table>
<table  style="float:right; margin-right:121px; text-align:center" border="0" align="right">
<tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >Total HT&nbsp;</td>
<td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="TotalHT" ></td>
</tr>
<tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >
Tva <select name="tva" style="font-size:19px;" id="TauxTva" onChange="change_Tva(<?php echo $i;?>)" >
<option>20</option>
<option>10</option>
</select>%&nbsp;
</td>   <td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="MontantTVA" ></td>
</tr>    <tr>
<td class="Doc_Tableau" style=" width:119px; text-align:right" >Montant TTC&nbsp;</td>
<td class="Doc_Tableau" style=" width:119px;"><input type="text" size="7" id="TotalTTC" ></td>
</tr>  </table>
<table id="tableau" style=" float:right; margin-right:121px" border="1"><tr><td>
<h1 style="text-align:center "><input type="submit"></h1>
</tr></td> </table>
</form>
<table id="tableau" style=" float:right; margin-right:121px" border="1"><tr><td>
<form action="" method="post" >Lignes <input type="text" name="Lignes" value="1"><input type="submit"></form>
</td></tr>
</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
var Total = 0;
function change_Tva (){ 
document.getElementById('MontantTVA').value = document.getElementById('TotalHT').value * (document.getElementById('TauxTva').value/100);
document.getElementById('TotalTTC').value = +document.getElementById('TotalHT').value + +document.getElementById('MontantTVA').value;
}
function change_valeur(valeur) 
{
document.getElementById('MontantHT'+valeur).value = document.getElementById('Prix'+valeur).value * document.getElementById('Quantite'+valeur).value; 
var nb = '<?php echo $_SESSION['Lignes']; ?>'; 
var ligne = 1;
while(ligne< nb)
	{
	document.getElementById('TotalHT').value = document.getElementById('MontantHT'+ligne).value
	ligne++;
	} 
alert('nb'+nb+'a'+ligne+' ligne');
 
document.getElementById('MontantTVA'). value = document.getElementById('TotalHT').value * (document.getElementById('TauxTva').value/100);
document.getElementById('TotalTTC'). value = +document.getElementById('TotalHT').value + +document.getElementById('MontantTVA').value;
 
}

**sekaijin** · 25/07/2014, 06h41

vu que le tableau est généré en php
je ferais tout les calcul en php

A+JYT

**feelwatt** · 25/07/2014, 11h43

Bonjour.

Et donc en rechargeant la page à chaque changement de Prix ou Quantité ?
Ca fait un max de $_Session, c'est pas dérangeant ?

Pourquoi cette incrémentation sur une même variable ne fonctionne pas ?

Code :

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

1
2
3
4
while(ligne< nb - 1){
	Total = parseInt(Total) + parseInt(document.getElementById('MontantHT'+ligne).value);
	ligne++;
}

**Spartacusply** · 25/07/2014, 12h00

Si tu recharges la page, il n'y a aucun problème car ton php est de nouveau exécuté.

Pour la boucle, il y a plusieurs pistes (tu peux débugguer avec la console de ton navigateur, accessible depuis la touche F12), l'une étant qu'il te manque des parenthèses :

Code :

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

while(ligne< (nb - 1))

**sekaijin** · 25/07/2014, 12h13

sorry mais vu qe tu as posté du php et non du html je n'ai pas lu le code
je n'avais pas vu que tu avais de input dans ton tableau.

perso je ferais très simple
un tableau javascript qui contient toutes les données.
lorsque une valeur et modifié dans un input remplacer la valeur dans le tableau javascript
et utiliser le tableau javascript pour faire les calcul.

ainsi pas de recherche continuelles dans le HTML pas de pb de convertions de parce ou quoi que ce soit. on ne met dans le tableau que des numbers et alea jacta est

A+JYT

**feelwatt** · 25/07/2014, 13h10

Déjà merci
pour avoir séparer le html du js dans mon premier message de cette discussion.
(Merci à qui l'a fait, c'est bien mieux comme ça).

Yes, pour les parenthèses, merci.

Pour les arrays JS, j'avais bien pensé que ca peut être une solution, mais je ne maitrise pas.
J'imagine que
- renseigner un array JS
- de données MySQl
- se fait par une une boucle Php.

**feelwatt** · 25/07/2014, 14h14

Je me demandais et tout faire en $_SESSION ?

C'est vrai que je "bosse" avec des GET et des POST , avec des IF ISSET et ca arrête pas de parse error et tout.

Tout en session et en rechargement....

Qu'en pensez-vous ?

**feelwatt** · 28/07/2014, 08h19

Bonjour,

Je me penche sur les Array JS,
J'ai fait tout un bazarre avec des boucles et ca commençais à faire "chauffer" le pross.
quand je suis tombé sur votre post (sekaijin), concernant l'incrustation d'une requête MySQL dans un array, à savoir:

Code php :

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

<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;

Je l'applique de cette façon:

Code php :

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

1
2
3
4
5
6
7
<?php 
$reqtarifs = mysql_query("SELECT * FROM tarifs");
while ($tarifs = mysql_fetch_array($reqtarifs))	{ ?>
	<script type="text/javascript">
	<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;
	</script>
<?php } ?>

Ensuite sur un onChange, je vais chercher une information dans un des tableaux, (Wood, Fire, Metal, Water, Earth)

Dans ce premier cas, il me renvoie bien la première entrée du tableau:
Un indiquant en 'dur' le nom du tableau

Code :

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

1
2
3
4
5
6
<script language="javascript">
function change_Designation(){
	Recherche = Wood[0];
	alert(Recherche);
} 
</script>

Dans ce deuxième cas, il me renvoie la première lettre de La_Designation:
Un indiquant en variable le nom du tableau

Code :

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

1
2
3
4
5
6
<script language="javascript">
function change_Designation(La_Designation) {
	Recherche = La_Designation[0];
	alert(Recherche);
} 
</script>

Je sens que j'approche, je le sens.
"Je l'Array !"
Auriez-vous une idée de l'erreur ?

**sekaijin** · 28/07/2014, 12h56

Envoyé par feelwatt

Bonjour,

Je me penche sur les Array JS,
J'ai fait tout un bazarre avec des boucles et ca commençais à faire "chauffer" le pross.
quand je suis tombé sur votre post (sekaijin), concernant l'incrustation d'une requête MySQL dans un array, à savoir:

Code php :

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

<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;

Je ne pense pas avoir écrit cela s'il f'agit du post http://www.developpez.net/forums/d10...cript-methode/
j'ai écrit ceci

Code php :

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

1
2
3
4
5
$scriptData = Array(
  'resultCode' => 200,
  'message' => "Jusqu'ici tout va bien !",
  'user' => get_object_vars($mySqlQueryResult)
);

rt

Code :

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

1
2
3
<script type="text/javascript">
  scriptData = <?php echo json_encode($scriptData ); ?>;
</script>

Envoyé par feelwatt

Je l'applique de cette façon:

Code php :

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

1
2
3
4
5
6
7
<?php 
$reqtarifs = mysql_query("SELECT * FROM tarifs");
while ($tarifs = mysql_fetch_array($reqtarifs))	{ ?>
	<script type="text/javascript">
	<?php echo $tarifs['Designation']; ?> = <?php echo json_encode($tarifs) ?>;
	</script>
<?php } ?>

Ensuite sur un onChange, je vais chercher une information dans un des tableaux, (Wood, Fire, Metal, Water, Earth)

Dans ce premier cas, il me renvoie bien la première entrée du tableau:
Un indiquant en 'dur' le nom du tableau

Code :

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

1
2
3
4
5
6
<script language="javascript">
function change_Designation(){
	Recherche = Wood[0];
	alert(Recherche);
} 
</script>

Dans ce deuxième cas, il me renvoie la première lettre de La_Designation:
Un indiquant en variable le nom du tableau

Code :

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

1
2
3
4
5
6
<script language="javascript">
function change_Designation(La_Designation) {
	Recherche = La_Designation[0];
	alert(Recherche);
} 
</script>

Je sens que j'approche, je le sens.
"Je l'Array !"
Auriez-vous une idée de l'erreur ?

je crois qu'il te faut afficher le code source HTML produit et non le PHP pour comprendre.
si La_Designation est une Stringcomme je le crois La_Designation[0]; est le premier caractère de la chaine.

A+JYT

**feelwatt** · 28/07/2014, 14h15

En effet en lisant le code source de la page j’aperçois que les arrays se sont bien construits.
(Ainsi qu'un dernier vide).

Code :

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

1
2
3
4
5
var Water = new Water("Water","M3","11","Element 5");
var Wood = new Wood("Wood","Ml","21","Element 3");
var Air = new Air("Air","Forfait","1","Element Air");
var Earth = new Earth("Earth","M2","18","Element 2");	
var  = new ("","","0","");

En effet La_Designation est une variable contenant une string, mais je pensais qu'on pouvait l'utiliser comme le nom d'un Array, non ?

Code :

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

1
2
3
4
5
6
7
8
function change_Designation(valeur) 
				{ 
					var La_Designation = document.getElementById('Designation'+valeur).value;
					alert(La_Designation);
 
					var Recherche = La_Designation[0];
					alert(Recherche);
				}

**sekaijin** · 28/07/2014, 19h52

Un chaine est une chaine donc

Code :

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

La_Designation[0]

est le premier caractère.

A+JYT

**feelwatt** · 02/08/2014, 07h19

Bonjour,
j'ai médité plusieurs jours sur cette citation.

J'ai fais des tests qui fonctionnent:

Code :

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

1
2
var monarray = new Array('a11','b13','c21'); 
alert = (monarray[1]);

Par contre
J'ai tenté dans tous les sens d'extraire une itération de ces array, avec comme nom d'Array une variable,
en vain, la chaîne reste la chaîne...
Auriez-vous un autre indice ?

**sekaijin** · 02/08/2014, 10h43

ne sachant pas ce que contient La_Designation ni ce que tu veux en extraire. je ne vois pas comment on pourrait t'aider

A+JYT

**feelwatt** · 02/08/2014, 12h48

Bonjour,
merci de votre réponse.

Donc,
Je possède des array suivants:

Code :

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

1
2
3
var Water = new Array('Water','M3','11','Element 5');
var Earth = new Array('Earth','Heure','18','Element 2');
var Air = new Array('Air','Forfait','1','Element Air');

(Ils sont bien dans le code source de la page.)

Grâce à un OnChange sur un select,

Code :

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

onChange="change_Designation(<?php echo $i;?>)"

je vais sur cette fonction avec la valeur de la ligne du tableau (ok)

Code :

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

1
2
3
4
5
6
function change_Designation(valeur) 
{ 
var La_Designation = document.getElementById('Designation'+valeur).value;
var Recherche = La_Designation[1];
document.getElementById('Unite'+valeur).value = Recherche; 
}

Dans cette fonction, je cherche la valeur du select nommé 'Designation' (ok)

Et c'est que je souhaiterais recevoir l'index 1, de l'array correspondant au mot à l'interieur de la variable La_Designation.

J'ai tnté pleins de chose mais il retourne toujours l'index de la string.
Il ne prend pas en compte le fait que ca soit une variable.

**feelwatt** · 04/08/2014, 12h00

J'ai trouvé comment formuler mon questionnement.

La question est en fait:

Comment utiliser une variable comme nom d'arrray ?

Code :

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

1
2
Tableau_a_utiliser = document.getElementById('Titre').value;
Le_resultat = Tableau_a_utiliser[1];

**NoSmoking** · 04/08/2014, 14h28

Bonjour,
tout devient effectivement plus clair.
si tu as un contrôle comme ceci par exemple

Code html :

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

<input type="text" value="tableau">

alors tu peux faire

Code :

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

1
2
3
var tableau = [1,2,3,4,5];
var nom= document.getElementsByTagName('INPUT')[0].value;  // pour l'exemple
alert( window[nom]);

**feelwatt** · 04/08/2014, 21h12

Ok,
Merci, NoSmoking

J'ai appliqué ta méthode
Et j'ai refais le code avec quelque chose de plus clair
(avec un peu de <br> pour faciliter la manipulation)

En premier:
Les arrays:

Code :

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

1
2
3
4
5
<script type="text/javascript">
			var TableauA = new Array('A1','A2', 'A3');
			var TableauB = new Array('B1','B2', 'B3');
			var TableauC = new Array('C1','C2', 'C3');
</script>

En second la fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
		function Changement_Tableau(Quel_Tableau)
		{
			document.getElementById('Tableau_choisi').value = Quel_Tableau; 
				// OK, on recoit le nom du tableau choisi
 
			document.getElementById('Case_retour1').value = Quel_Tableau[0];
			document.getElementById('Case_retour2').value = Quel_Tableau[1];
			document.getElementById('Case_retour3').value = Quel_Tableau[2];
		 		// Pour ceux-ci on reçoit les 3 premières lettres du tableau choisi 
                                // > mais pas le contenu de l'array <
 
		 }
</script>

En troisième l'Html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Choisir un tableau: 
<select id="Choix_tableau" onChange="Changement_Tableau(this.value)">
	<option value="TableauA">TableauA</option>
	<option value="TableauB">TableauB</option>
	<option value="TableauC">TableauC</option>
	<option value="Gateau">Gateau</option>
</select>
<br>
 
Le Tableau_choisi est: <input type="text" id="Tableau_choisi">
<br>
 
Case_retour 1: <input type="text" id="Case_retour1"><br>
Case_retour 2: <input type="text" id="Case_retour2"><br>
Case_retour 3: <input type="text" id="Case_retour3"><br>

Une string est une string,
et c'est bien les index du contenu de la string que l'on reçoit.

Mais alors, comment faire pour dire:
Cette string, c'est une variable qui contient un titre d'array.

Ps:
C'est intéressant, de voir que JS prend les string comme des arrays.

**NoSmoking** · 05/08/2014, 13h39

J'ai appliqué ta méthode

non, "ma" méthode t'aurais fait écrire

Code :

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

1
2
3
4
5
6
7
8
function Changement_Tableau(Quel_Tableau)
{
	document.getElementById('Tableau_choisi').value = Quel_Tableau;
 
	document.getElementById('Case_retour1').value = window[Quel_Tableau][0];
	document.getElementById('Case_retour2').value = window[Quel_Tableau][1];
	document.getElementById('Case_retour3').value = window[Quel_Tableau][2];
}

il faut bien que tu comprennes que lorsque tu passes une String à ta fonction tu reçois une String qui peut également représenter le nom d'un variable.
Lorsque tu fais afficher( string[x]) tu affiches le x^éme caractère de la string, sur les navigateurs modernes.
Lorsque tu fais afficher( window[string][x]) tu affiches le contenu du x^éme indice de la variable appartenant à window et nommée string et cela à condition que celle ci soit un Array sinon voir ci dessus.

Code :

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

document.getElementById('Case_retour1').value = window[Quel_Tableau][0][1]; //2émé caractère du contenu à l'indice 0 du tableau

**sekaijin** · 05/08/2014, 15h33

de toute façon pourqui dès le départ la structure n'est pas complète ?
il ne sert à rien de définir 3 variables

Code :

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

1
2
3
var Water = new Array('Water','M3','11','Element 5');
var Earth = new Array('Earth','Heure','18','Element 2');
var Air = new Array('Air','Forfait','1','Element Air');

1 seule suffit

Code :

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

1
2
3
4
5
var data = {
  'Water': ['Water','M3','11','Element 5'],
  'Earth': ['Earth','Heure','18','Element 2'],
  'Air':   ['Air','Forfait','1','Element Air']
};

du coup on utilise la variable sans se poster de question

Code :

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

data['Water'][0];

A+JYT

**feelwatt** · 06/08/2014, 13h29

Ok, Super,
Merci sekaijin et NoSmoking.

C'est donc des tableaux à deux dimensions.
Je vais pouvoir faire en sorte de ne pas recharger ma page à chaque changement.
Il est magnifique ce JavaScript.

Aussi, il y a-t-il une limite dans le nombre d'array ?

Bonne journée.

Calculs sur un tableau Html créé en boucle

JavaScript

Discussions similaires

Partager

Partager