Tableau Excel sur Internet

Fermé

KOBB - Modifié par KOBB le 29/12/2011 à 16:36
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 1 janv. 2012 à 11:17

Bonjour a toutes et tous,

Voila j'ai une question a la quel il doit certainement y avoir une réponse...

J'ai créer un fichier :

http://dl.free.fr/jAIoS0Cnd/Grepoculture.xls

et je voudrais avoir la même chose mais directement sur mon site.

un peu comme ce site

http://jormund.free.fr/mayesim/

voila merci de votre aide

A voir également:

Tableau Excel sur Internet
Tableau croisé dynamique - Guide
Liste déroulante excel - Guide
Code ascii tableau - Guide
Trier tableau excel - Guide
Comment imprimer un tableau excel sur une seule page - Guide

12 réponses

Réponse 1 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
30 déc. 2011 à 22:00

en javascript (sans rechargement de page):
le calcul se fait a chaque chiffre tapé

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
 <head> 
 <title>GREPO - Culture</title>
<script type="text/javascript">
function calculer(id_lire,id_ecrire,multipl){
	var saisie_input = document.getElementById(id_lire).value; //on lit la valeur
	var reponse= parseInt(saisie_input) * parseInt(multipl); //calcul
	document.getElementById(id_ecrire).value = reponse; //ecriture réponse

}
</script> 
 </head> 

 <body> 
   <table class="bat_sim" cellspacing="1"> 
    <tr> 
     <th>Unitées Navale</a></th> 
     <th>Nombre</th> 
     <th class="colonne">Points de Combat</th> 
    </tr> 
     
       <tr> 
     <td label for="input1">Bâteau de Transport</a></label></nobr></td> 
     <td class="niv_style"><input type="text" name="input1" id="input1" size="1" maxlength="4" value="0" onkeyup="calculer('input1','reponse1','7');" /></td> 
     <td class="niv_style"><input type="text" name="reponse1" id="reponse1" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
	<tr> 
     <td label for="input1">Bâteau ......</a></label></nobr></td> 
     <td class="niv_style"><input type="text" name="input1" id="input2" size="1" maxlength="4" value="0"  onkeyup="calculer('input2','reponse2','7');" /></td> 
     <td class="niv_style"><input type="text" name="reponse" id="reponse2" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
		
  </table> 
 </body> 
</html>

KOBB
31 déc. 2011 à 08:42

C'est parfaitement cela qu'il me fallait !!!

Mais bon comme je suis un peut perfectionniste, est il possible de faire en sorte que lorsque la case est vite il n'y est pas NAN qui s'affiche mais bien 0 ou alors qu'il soit impossible de laisser la case vide, elle revent automatique a 0 ?

Réponse 2 / 12

ghulit03 Messages postés 529 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 13 novembre 2015 43
29 déc. 2011 à 20:13

jette un oeil ici --> https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

A++

KOBB
29 déc. 2011 à 22:10

j'ai deja suivi ce tuto et ce n'est pas cela que je veut faire.

Je veut pouvoir remplir certaines cases et que dans d'autre case j'ai des résultats

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 22:12

Comme une spreadsheet de chez google docs en somme ?

KOBB
Modifié par KOBB le 30/12/2011 à 13:21

Je ne sais pas trop ce que cela signifie

mais si tu jette un coup d'oeil ici

http://jormund.free.fr/mayesim/

je veut faire un site dans le même esprit. ou l'ont rempli des cases, et un résultat s'affiche.
Ce sont des multiplications et des additions toutes bête

Réponse 3 / 12

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
29 déc. 2011 à 23:50

Apparement tu as une option pour le faire dans excel aprés une petite recherche (je n' utilise pas excel)

https://www.google.fr/search?q=.xls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a&source=hp&channel=np&gws_rd=ssl#sclient=psy-ab&hl=fr&client=firefox-a&hs=qA5&rls=org.mozilla:fr%3Aofficial&channel=np&source=hp&q=convertir+tableau+excel+page+web&oq=convertir+tableau+excel+page+web&aq=f&aqi=g-v1&aql=&gs_sm=e&gs_upl=2170l6648l0l6889l32l12l0l13l13l0l413l2686l0.5.5.1.1l20l0&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=2768f13ff0ab51f2&biw=1680&bih=904

et notemment:

https://forum.alsacreations.com/topic-2-34645-1-Convertir-excel-en-page-web.html

Réponse 4 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 30/12/2011 à 13:57

je ne pense pas que le site que tu cites en exemple soit de l'excel.

Les champs remplis font partie d'un formulaire et quand tu cliques sur le bouton ça envoie la page et les valeurs vers le serveur qui fait les calculs et affiche les résultats

donc il faut t'orienter vers le php par exemple et aller sur le site www;siteduzero.com pour apprendre ce langage

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 12

KOBB
30 déc. 2011 à 16:47

bon je vais le relire, mais je n'est pas vu la partie.

et je sais bien que c'est pas du excel...

mais a partir de mon tableur je veut faire quelque chose de semblable ...

Réponse 6 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
30 déc. 2011 à 17:05

Excel est un log qui tourne sur ton PC

une page web est chargée depuis un serveur, pour faire des calculs 2 solutions:
- envoyer les données au serveurs pour qu'il te renvoie la page avec les résultats (donc utiliser le php ou asp ...)

- faire en javascript (donc localement dans le navigateur) les calculs, le résultat s'affiche de suite dans ta page sans rechargement

Réponse 7 / 12

KOBB
Modifié par KOBB le 30/12/2011 à 20:19

Bon j'ai réussis a faire ce que je voulais, je seul problème c'est comment faire un calcul ? Alors j'ai regarder sur différent tutos et je vois: PhP, Mysql, bdd mais je comprend pas grand chose !!

Donc je vous met une partie de mon script.
Si vous le visionnez, vous verrez une case en dessous de nombre. si dans cette case je met "x" je voudrais qu'en dessous de points de combat, ce soit égale a "x*7"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
 <head> 
 <title>GREPO - Culture</title>  
 </head> 

 <body> 
   <table class="bat_sim" cellspacing="1"> 
    <tr> 
     <th>Unitées Navale</a></th> 
     <th>Nombre</th> 
     <th class="colonne">Points de Combat</th> 
    </tr> 
     
       <tr> 
     <td label for="input1">Bâteau de Transport</a></label></nobr></td> 
     <td class="niv_style"><input type="text" name="input1" id="input1" size="1" maxlength="4" value="0";/></td> 

    </tr> 
  </table> 
 </body> 
</html>

Voila un grand merci a celui qui me dira comment faire...

Réponse 8 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
31 déc. 2011 à 10:03

l'ordre des réponse est un peu chamboulé mais bon voilà la solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
 <head> 
 <title>GREPO - Culture</title>
<script type="text/javascript">
function calculer(id_lire,id_ecrire,multipl){
	var saisie_input = document.getElementById(id_lire).value; //on lit la valeur
	//calcul seulement si valeur différente de vide ou de zero
	if(saisie_input !="" &&  saisie_input !=0){
		var reponse= parseInt(saisie_input) * parseInt(multipl); //calcul
		document.getElementById(id_ecrire).value = reponse; //ecriture réponse
	}else{
		return false;
	}
}
</script> 
 </head> 

 <body> 
   <table class="bat_sim" cellspacing="1"> 
    <tr> 
     <th>Unitées Navale</a></th> 
     <th>Nombre</th> 
     <th class="colonne">Points de Combat</th> 
    </tr> 
     
       <tr> 
     <td label for="input1">Bâteau de Transport</a></label></nobr></td> 
     <td class="niv_style"><input type="text" name="input1" id="input1" size="1" maxlength="4" value="0" onkeyup="calculer('input1','reponse1','7');" /></td> 
     <td class="niv_style"><input type="text" name="reponse1" id="reponse1" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
	<tr> 
     <td label for="input1">Bâteau ......</a></label></nobr></td> 
	 <!-- tu peux mettre le coef multiplicateur que tu veux 
	 pour la balise nobr vas voir ce lien :https://forum.alsacreations.com/topic-2-30166-1-La-balise-nobr.html
	 
	 -->
     <td class="niv_style"><input type="text" name="input1" id="input2" size="1" maxlength="4" value="0"  onkeyup="calculer('input2','reponse2','5');" /></td> 
     <td class="niv_style"><input type="text" name="reponse" id="reponse2" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
		
  </table> 
 </body> 
</html>

KOBB
Modifié par KOBB le 31/12/2011 à 10:29

c sa mais si je met 1 dans la case puis que je l'efface, le résulta reste a 7, il ne revient pas a 0 ^^

par ailleurs j'ai besoin de faire une addition de toutes les réponses. mais je ne sais pas trop comment m'y prendre ^^ alors je tatonne ...

Réponse 9 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
31 déc. 2011 à 13:19

la function modifiée pour répondre à ta première question:

function calculer(id_lire,id_ecrire,multipl){
	var saisie_input = document.getElementById(id_lire).value; //on lit la valeur
	
	//calcul seulement si valeur différente de vide ou de zero
	if(saisie_input !="" &&  saisie_input !=0){
		var reponse= parseInt(saisie_input) * parseInt(multipl); //calcul
		document.getElementById(id_ecrire).value = reponse; //ecriture réponse
	}else{
		document.getElementById(id_ecrire).value = 0; //ecriture réponse
		return false;
	}
}

pour la deuxième pas trop le temps pour le moment je dois aller acheter des huitres !

KOBB
31 déc. 2011 à 14:39

Ha ok ^^

Si non ta Formule est parfaitement parfaite ^^

Il ne manque plus que le total et mettre le bouton reset :

		
                <p class="Boutons">
		<input type="Reset" value="Reset" />
		</p>

mais il reset rien du tout ^^

Réponse 10 / 12

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
31 déc. 2011 à 13:40

Desolé si mon lien n' etait pas bon, je me suis basé sur le titre (excel-dans-une-page-web)
Je parlais de convertir une page excel en page web, mais alors j' ai mal compris, tu voulais plutot une sorte de tableau qui calcul seul mais sur le web et pas seulement une presentation de page excel?

Bon je laisse la place a plus connaisseur que moi, je ne connais pas excel du tout :)

Réponse 11 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
31 déc. 2011 à 16:53

voilà total + reset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
 <head> 
 <title>GREPO - Culture</title>
<script type="text/javascript">
function calculer(id_lire,id_ecrire,multipl){
	var saisie_input = document.getElementById(id_lire).value; //on lit la valeur
	
	//calcul seulement si valeur différente de vide ou de zero
	if(saisie_input !="" &&  saisie_input !=0){
		var reponse= parseInt(saisie_input) * parseInt(multipl); //calcul
		document.getElementById(id_ecrire).value = reponse; //ecriture réponse
	}else{
		document.getElementById(id_ecrire).value = 0; //ecriture réponse		
	}
	//appel fonction total
	var tot = total();
	document.getElementById('total').value = tot;
}
function total(){
	var tot=0;
	var form = document.forms.form1; //formulaire
	for (i=0 ; i<= form.length-1 ; i++)	{
		//parcours de tous les éléments du formulaire		 
		if (form[i].type == 'text' && form[i].name.substr(0,7) == 'reponse'){
			if(form[i].value !=""){
				tot = tot + parseInt(form[i].value);
			}
		}
	}
	return tot;
}
function effacer(){
	var form = document.forms.form1; //formulaire
	for (i=0 ; i<= form.length-1 ; i++)	{
		//parcours de tous les éléments du formulaire		 
		if (form[i].type == 'text' && (form[i].name.substr(0,7) == 'reponse' || form[i].name.substr(0,5) == 'input'  || form[i].name.substr(0,5) == 'total')){
			if(form[i].value !=""){
				form[i].value ="";
			}
		}
	}

}
</script> 
 </head> 

 <body>
<form name="form1"> <!-- attention cette balise doit avoir exactement ce nom -->
   <table class="bat_sim" cellspacing="1"> 
    <tr> 
     <th>Unités Navales</th> 
     <th>Nombre</th> 
     <th class="colonne">Points de Combat</th> 
    </tr> 
     
       <tr> 
     <td label for="input1">Bâteau de Transport</label></nobr></td>
		<!-- attention: tous les input de saisie doivent avoir comme name "input1, input2 etc... -->
     <td class="niv_style"><input type="text" name="input1" id="input1" size="1" maxlength="4" value="0" onkeyup="calculer('input1','reponse1','7');" /></td> 
	 <!-- attention: tous les input de réponse doivent avoir comme name "reponse1, reponse2 etc... -->
     <td class="niv_style"><input type="text" name="reponse1" id="reponse1" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
	<tr> 
     <td label for="input1">Bâteau ......</label></nobr></td> 
	 <!-- tu peux mettre le coef multiplicateur que tu veux 
	 pour la balise nobr vas voir ce lien :https://forum.alsacreations.com/topic-2-30166-1-La-balise-nobr.html
	 
	 -->
     <td class="niv_style"><input type="text" name="input1" id="input2" size="1" maxlength="4" value="0"  onkeyup="calculer('input2','reponse2','5');" /></td> 
     <td class="niv_style"><input type="text" name="reponse2" id="reponse2" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
	
	<tr> 
     <td label for="input1"><b>Total</b></label></nobr></td> 
	
	 
	 
     <td class="niv_style">&nbsp;</td> 
	 <!-- au passage tu vois que l'on peut appliquer du CSS à l'intérieur d'un input -->
     <td class="niv_style"><input style="font-weight:bolder;color:red;" type="text" name="total" id="total" size="1" maxlength="4" value="" readonly /></td> 

    </tr>
		
  </table>
  <input type="button" name="reset" value="Effacer tout" onclick="effacer();" />
</form>  <!-- ne pas enlever cette balise -->
 </body> 
</html>

KOBB
31 déc. 2011 à 18:17

Je te remerci de ton aide

voici le lien de mon site et du résultat que cela donne ^^

http://grepo-help.olympe-network.com/Grepo_culture/grepoculture.php

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
31 déc. 2011 à 18:38

Pas mal, en fait j' avais bien mal compris! Sympa!

Réponse 12 / 12

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
1 janv. 2012 à 11:17

oui pas mal le site, juste un petit détail, chez moi sur Firefox le bouton "Effacer tout" se balade en haut à gauche est ce normal ?

Discussions similaires

35 GO à l'étranger