Tabelle, form e formula matematica

frix

Nuovo Utente
19 Feb 2014
2
0
0
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:
AlimetogrammiKcalCHO
Biscotti integrali10042573,70
Biscotti frollini10042970,80
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

Utente Attivo
21 Gen 2014
98
0
0
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

Nuovo Utente
19 Feb 2014
2
0
0
Grazie ...

Sei stato molto gentile, proverò e vedrò cosa riesco ad ottenere!
 
Discussioni simili
Autore Titolo Forum Risposte Data
A Tabelle e form Javascript 2
elpirata Form con tabelle HTML e CSS 6
D Più tabelle collegate per una form .NET Framework 2
B Due tabelle con un unico form PHP 16
max75 query su due tabelle e dati doppioni MS Access 2
S Consiglio si relazione tabelle MS Access 1
E Info relazione tabelle MySQL 17
E Query differenza tra tabelle MySQL 5
F Somma di più tabelle da script Javascript 0
T come ordinare dei record recuperati da due tabelle MySQL 0
K Estrazione di più risultati da tabelle correlate PHP 5
A Visualizzazione due tabelle PHP 1
T colonne di tabelle mysql ordinate MySQL 0
T Query su due tabelle con totali Database 4
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
R Join articolato su 3 tabelle MySQL 5
M Join 3 tabelle PHP 0
M Aggiornare stesso campo in due tabelle PHP 0
M Problemi con query a più tabelle PHP 3
L estrarre valori max tra più tabelle MySQL 2
M Problema su query JOIN in tre tabelle PHP 0
MarcoGrazia Dati nulli su join tra più tabelle MySQL 1
S Problema esportazione tabelle Mysql in Excel PHP 0
M Problema su update di 3 tabelle PHP 1
M Aggiornare simultaneamente i campi di due tabelle collegate con id PHP 4
Tommy03 Unire dati da due tabelle MySQL 5
Tommy03 Unione query di 4 tabelle MySQL 1
G eseguire calcoli matematici su risultati 2 tabelle mysql PHP 4
G Problema caricamento tabelle MySql da PhP PHP 0
R Relazione tra tabelle MS Access 5
Tommy03 Query tra 3 tabelle MySQL 2
G Controllare valori in 2 tabelle PHP 5
L update tabelle in php mysql [risolto] PHP 6
K Unire più tabelle in una singola tabella PHP 3
M Esportare tabelle mdb con relazioni in mysql MS Access 0
elpirata [MySQL] Sincronizzare dati tra due tabelle sullo stesso host MySQL 0
M [HTML] Tool per tabelle complesse responsive HTML e CSS 0
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
P [PHP] Inserti su più tabelle PHP 3
L [PHP] CMS con DB/tabelle perdsonale PHP 0
felino [Wordpress] Tabelle appartenenti a plugin rimossi WordPress 0
T mysql tutorial per importare tabelle access in mysql aiuto MySQL 2
P [PHP] Stampare record di diverse tabelle ma con nomi uguali PHP 6
S [PHP] come esportare due tabelle in file excel su due fogli distinti PHP 8
G [PHP] backup manuale(o automatico) tabelle msql PHP 6
A [Javascript] Multi input su due tabelle correlate Javascript 1
D [MySQL] Tabelle "molti a molti", SELECT con troppe QUERY MySQL 7
K [PHP] Collegamento tra più tabelle PHP 10
K [MS Access] query da tabelle relazionate MS Access 4
S [PHP] Inner join su 4 tabelle PHP 6

Discussioni simili