Tabelle, form e formula matematica

frix · 19 Feb 2014

Salve a tutti, sono nuova sia nel forum che nella programmazione web. Sto cercando di creare una pagina web dove poter personalizzare la conta dei carboidrati e siccome ho poca dimestichezza non riesco nel mio intento. Cercherò di spiegare con chiarezza la mia difficoltà.
ho creato una tabella di questo tipo:
[table="width: 500, class: outer_border"]
[tr]
[td]Alimeto[/td]
[td]grammi[/td]
[td]Kcal[/td]
[td]CHO[/td]
[/tr]
[tr]
[td]Biscotti integrali[/td]
[td]100[/td]
[td]425[/td]
[td]73,70[/td]
[/tr]
[tr]
[td]Biscotti frollini[/td]
[td]100[/td]
[td]429[/td]
[td]70,80[/td]
[/tr]
[/table]
Vorrei creare un form dove io o qualsiasi utente inserendo una variazione in grammi riferito ad esempio ai biscotti integrali mi appaia a schermo il risultato variato delle Kcal e dei carboidrati. Ad esempio, siccome i valori in tabella sono riferiti a 100 gr di alimento e io ne devo mangiare 60, siccome sono diabetica e devo regolarmi con l'insulina e inoltre devo seguire una dieta di circa 1500 calorie, per non fare tutte le operazioni di volta in volta, per i diversi componenti (qui ho specificato solo kcal e CHO per non prendere troppo spazio, ci sono grassi, proteine, fibre ecc) e per diversi alimenti, sarebbe utile impostare il calcolo (60*425/100) facendo riferimento ai valori immessi in tabella riferiti a 100 gr di peso e a quelli effettivi utili in grammi all'utente (nell'esempio 60 gr). Spero di essermi spiegata. Vi ringrazio per l'attenzione, spero che riusciate ad aiutarmi indicandomi uno script o qualcosa di simile. La pagina la sto costruendo su un sito dove offrono spazio gratuito con delle funzioni base pre-impostate, però da la possibilità di inserire del codice html5.

LorenzoPi · 20 Feb 2014

Forse questo è quello che vuoi tu:

HTML:

<!doctype html>
<html lang="it">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			table input{
				width: 100%;
			}
			table .grammi{
				display: none;
			}
		</style>
	</head>

	<body>
		<table>
		<tbody>
			<tr>
				<td>Alimeto</td>
				<td>grammi</td>
				<td>Kcal</td>
				<td>CHO</td>
			</tr>
			<tr class="alimento">
				<td class="nome">Biscotti integrali</td>
				<td><input type="text" value="0" onkeypress="update(this)" onkeyup="update(this)"></td>
				<td class="grammi">100.00</td>
				<td class="kcal">425.00</td>
				<td class="cho">73.70</td>
			</tr>
			<tr class="alimento">
				<td class="nome">Biscotti frollini</td>
				<td><input type="text" value="0" onkeypress="update(this)" onkeyup="update(this)"></td>
				<td class="grammi">100.00</td>
				<td class="kcal">429.00</td>
				<td class="cho">70.80</td>
			</tr>
		</tbody>
	</table>

		<script>
		var Alimento = function(id,nome,grammi,kcal,cho){
			this.id = id;
			this.nome = nome;
			this.grammi = grammi;
			this.kcal = kcal;
			this.cho = cho;

			this.calcKcal = function(grammi){
				grammi = parseFloat(grammi).toFixed(2);
				newKcal = parseFloat(grammi*this.kcal/this.grammi).toFixed(2);
				document.getElementById(this.id).getElementsByClassName('kcal')[0].textContent = newKcal;
			}
			this.calcCHO = function(grammi){
				grammi = parseFloat(grammi).toFixed(2);
				newCHO = parseFloat(grammi*this.cho/this.grammi).toFixed(2);
				document.getElementById(this.id).getElementsByClassName('cho')[0].textContent = newCHO;
			}
		}

		var alimenti = [];
		for(var i=0, len=document.getElementsByClassName('alimento'); i<len.length; i++){
			len[i].setAttribute('id','alimento-'+i);
			var nome = len[i].getElementsByClassName('nome')[0].textContent;
			var grammi = parseFloat(len[i].getElementsByClassName('grammi')[0].textContent).toFixed(2);
			var kcal = parseFloat(len[i].getElementsByClassName('kcal')[0].textContent).toFixed(2);
			var cho = parseFloat(len[i].getElementsByClassName('cho')[0].textContent).toFixed(2);
			alimenti[i] = new Alimento('alimento-'+i,nome,grammi,kcal,cho);
			
		}

		function update(el){
			var grammi = parseFloat(el.value).toFixed(2);
			if(grammi !== 'NaN' && grammi >= 0){
				var idParent = el.parentNode.parentNode.id;
				var index = parseInt(idParent.replace('alimento-',''));
				alimenti[index].calcKcal(grammi);
				alimenti[index].calcCHO(grammi);
			}
		}
		</script>

	</body>
</html>

Nella sezione grammi c'è un input di tipo testo dove scrivi i grammi che ti servono. Inoltre nell'html c'è per ogni riga della tabella una colonna nascosta con class="grammi" dove là inserisci il tuo valore di default su cui si deve basare il calcolo!

.. Comunque se vuoi che funzioni con questo script allora ogni volta che aggiungi una riga i seguenti campi: grammi, kcal, cho se sono dei numeri con la virgola allora nell'html non scrivere tipo 73,80 ma 73.80 ( insomma devi mettere il puntino al posto della virgola )

frix · 20 Feb 2014

Grazie ...

Sei stato molto gentile, proverò e vedrò cosa riesco ad ottenere!

LorenzoPi · 22 Feb 2014

ok fammi sapere

Cerca

Cerca

Tabelle, form e formula matematica

frix

Nuovo Utente

LorenzoPi

Utente Attivo

frix

Nuovo Utente

LorenzoPi

Utente Attivo

Discussioni simili