Posez votre question Signaler

Javascript/php récup des valeurs de <td>

poup - Dernière réponse le 6 mai 2008 à 11:03
Bonjour,
J'aimerais insérer une fonction js qui calcul les sous-totaux dans un tableau (html) de bon de commande. Le résultat est la quantité choisie dans un menu déroulant multiplié par le prix en fonction de la quantité (3 tranches de prix pour chaque article).
Mon problème est comment récupérer les prix qui ne sont pas dans des champs. Comme c'est différent pour chaque article et qu'il peut y avoir des modifications dans l'avenir, j'aimerais pouvoir récupérer automatiquement les valeurs pour éviter de les saisir dans la fonction ou dans les paramètres.
On peut donner des id aux <td> contenant les prix et récupérer la valeur avec getelementById (j'avoue que je ne m'y connais pas bien), ou utiliser des champs cachés et recopier manuellement les prix ? Faut-il définir un tableau en javascript ? Ou est-ce qu'il vaut mieux construire une base de données ? C'est sûrement la meilleure solution à long term, mais là, j'aimerais trouver une solution la plus rapide.
Voici le tableau en question (en réalité, il y a évidemment 50 lignes !)
<html>
<form id="orderform" name="orderform" method="post" action="mailto:xxx">
<table class="pricetable" cellspacing="1" >
<tr class="titrecolonne" >
<td class="ref" >Référence</td>
<td class="nom" >Dénomination</td>
<td class="parcent">Par 100 g </td>
<td class="par5cent">Par 500 g </td>
<td class="parkilo">Par kg</td>
<td class="quantity">Quantité</td>
<td class="prix" >Sous-total</td>
</tr>
<tr>
<td class="ref">xxx</td>
<td class="nom">YYY</td>
<td class="parcent">20€</td>
<td class="par5cent">80€</td>
<td class="quantity">150€</td>
<td class="prix">
<select name="qtty_ref1" size="1" onchange="calculprix(this.value, this.name);calcultotal();">
<option value="-----">-----</option>
<option value="1">100g</option>
<option value="2">200g</option>
<option value="3">300g</option>
<option value="4">400g</option>
<option value="5">500g</option>
<option value="10">1kg</option>
<option value="15">1,5kg</option>
<option value="20">2kg</option>
</select>
</td>
<td width="73"><input name="montant_ref1" size="14" /></td>
</tr>
</table>
</form>
</html>
Deuxièmement, j'aimerais pouvoir remplacer dans la fonction qui calcule les montants:
document.orderform.montant_ref1.value=String(soustot);
par document.orderform.nom_champ_soustot.value=String(soustot);
"nom_champ_soustot" étant une variable que j'ai créé dans la même fonction (concaténation du "montant"+nom de la référence extraite du nom du champs qtty) , mais ça ne marche pas. Comment faire ???
Lire la suite 

Javascript/php récup des valeurs de <td> »

5 réponses
Réponse
+3
moins plus
PhP 1757Messages postés 11 décembre 2000Date d'inscription 6 mai 2008 à 11:03
Bjr

Voici un ex 


<html>
<head>
<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title>
<style>
*
{
	font-size : 10pt;
	font-family : Arial;
}
</style>

<script>
 	
function CreerTableHTML(parentId,nbrCol,nbrRow)
{
	// Recherche de l'élément parent dans lequel on va insèrer la nouvelle table
	var parentElt = document.getElementById(parentId);
	
	// Efface le contenu de l'élément parent
	parentElt.innerHTML="";
	
	// Création d'une nouvelle table = élément <table>
	var table = document.createElement("table");	
	// Donne une bordure à la table (facultatif)
	table.setAttribute("border", "1");
	
	// Création du corps de la table	
	var tableBody = document.createElement("tbody");


	// Pour chaque ligne
	for(var rowIndex = 0; rowIndex < nbrRow; rowIndex++) 
	{
			// Création d'une nouvelle ligne= élément <tr>
			var row = document.createElement("tr");
			  
			// Pour chaque colonne
			for(var colIndex = 0; colIndex < nbrCol; colIndex++)
			{
				// Création d'une nouvelle cellule = élément <td>
				var cell = document.createElement("td");
				// Donne une largeur de 40 pixels à chaque cellule (facultatif)
				cell.style.width= "40px";
				// Centre la contenu de chaque cellule (facultatif)
				cell.style.textAlign = "center";
				// Contenu de la cellule
				cell.innerHTML="["+colIndex+","+rowIndex+"]";
				// Ajoute la cellule dans la ligne	
				row.appendChild(cell);
		    }
			
			// Ajoute la ligne à la fin du corps du tableau
            tableBody.appendChild(row);	
	}	
	// Ajoute le corps du tableau dans la table
	table.appendChild(tableBody);
	
	// Ajoute la table dans l'élément parent ... ouf !
	parentElt.appendChild(table);
}


function generer()
{
	var nbrCol = document.getElementById("nbrCol").value;
	var nbrRow = document.getElementById("nbrRow").value;
	CreerTableHTML('conteneur',nbrCol,nbrRow);
}

</script></head>
<body>
Test de création de table HTML dynamiquement avec DOM<br/><br/>
<form>
Nombre de colonnes<input type="text" value="10" id="nbrCol" size="4">
Nombre de lignes<input type="text" value="5" id="nbrRow" size="4">
<input type="button" onclick="generer()" value="Générer la table">
</form>

<div id="conteneur"></div>
</body>
</html>



Ceci est juste un ex basique et pas vraiment exploitable en l'état.

Evidemment pour ton application il faut utiliser un modèle bcp plus sophistiqué à base d'objets JavaScript

Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
ak45 3 mai 2008 à 18:43
Bonjour,
Il me semble que tu ne différencies pas l'affichage des variables. Il n'y a pas besoin de champs pour faire les calculs, juste une variable pour chaque élément et une pour le résultat de l'opération. Pour l'affichage il faut mettre la variable dans le html plutot que de récupérer la valeur dans la page. Donc commence par définir tes variables et affiche leur valeur en html après.

[quote]
j'aimerais pouvoir récupérer automatiquement les valeurs pour éviter de les saisir dans la fonction ou dans les paramètres.
/quote
Les récupérer d'où? une base de données ou un fichier texte? Si c'est dans une base autant faire les opérations avec php. Si les valeurs sont rentrés par un formulaire il faut utiliser des balises <input> du <form> et non <td> qui est un élément de mise en page.

Attention: String(soustot); indique une chaîne de caractères, donc impossible de faire des opérations avec(multiplication, addition,...). Pour pouvoir faire des opérations il faut utiliser une variable de type Number et non String.

 Ajouter un commentaire
poup - 4 mai 2008 à 10:22
Bah, le problème justement, c'est qu'il n'y a pas de base de données, à moins que je la construise moi-même, et on m'a donné des tableaux html avec les différents prix dans <td>. A moi de faire des formules de calcul avec ça. Je sais utiliser les valeurs si ct dans les champs <input>, mais ce n'est pas le cas. Comme tu dis, il faut sans doute d'abord définir les variables et les faire afficher dans le tableau après, mais je ne vois pas trop où et comment définir. Donc j'ai pensé qu'il y avait des moyens de récupérer les valeurs dans les balises <td> en mettant des id ou des noms. ?

concernant String, je ne sais pas d'où j'ai récupéré ça, j'avais cru que les valeurs dans les champs de formulaire devaient être en string et que pour faire des calculs, on utilise eval... Ce n'est pas la peine alors ?
Ajouter un commentaire
Réponse
-1
moins plus
PhP 1757Messages postés 11 décembre 2000Date d'inscription 5 mai 2008 à 17:10
Bjr

La base de données ne t'aidera pas ici : en revanche elle peut te permettre de stocker les valeurs pour précharger dynamiquement ta table HTML (pratique quand les prix et les références changent car tu n'as à maintenir que la base de données et pas les pages web) et éventuellement de sauvegarder tes bons de commande

Pour ta table HTML : tu peux effectivement utiliser des ID (différents!) pour chaque ligne de la table HTML (voir chaque cellule) et utiliser getElementById() mais avec 50 lignes ça devient vite lourd et source d'erreur et je ne parle pas des mises à jour ...

Tu peux aussi stocker les données dans des tableaux Javascript en début de page : c'est plus pratique niveau prog Javascript. Mais si tu conserves également ta table HTML ça revient à maintenir manuellement la même info à 2 endroits différents c'est pas mieux, c'est même pire ...

L'idéal : stocker les données dans un tableau Javascript et généré dynamiquement ensuite la table HTML en JavaScript à l'aide de DOM (on peut aussi utiliser PHP pour générer la table HTML et le tableau Javascript : dans ce cas les données doivent provenir d'une base de données sinon ca n'a pas trop d'intérêt)

Si tu veux je peux te montrer comment générer dynamiquement une table HTML en Javascript et la charger à partir du contenu d'un tableau Javascript.






Ajouter un commentaire
poup - 5 mai 2008 à 19:37
Merci pour cette réponse très claire.
Effectivement, j'aimerais bien que tu me montre comment construire la table html à partir du tableau js, d'autant plus que je ne connais pas du tout DOM...

Il y a qq os, toutefois.
- En réalité, le tableau est décomposé en plusieur tableaux par catégorie, entrecoupé du nom de la catégorie et dudescriptif. On créé pl. tableaux js par catégorie et le pb est résolu ?

On peut voir ceci après, mais:
- Il y a qq références pour lesquels il n'y a qu'un prix au lieu de 3. (Evidemment, sinon, ça aurait été trop simple !!!)
Dans la fonction js qui calcule le sous-total, on précise que pour ces références, on fait un autre calcul, et c'est tout ?
En tout cas, ça n'a pas d'incidence sur la construction du tableau en html ou js ?

Dans tout les cas, les tableaux html sont construits sur le même modèle (3 td pour 3 prix), même si pour certains tableaux ou certaines lignes, il y a des cellules vides.

Merci !!!
Ajouter un commentaire
Posez votre question
Ce document intitulé « javascript/php récup des valeurs de <td> » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?