Tableau Excel sur Internet

KOBB -  
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

12 réponses

  1. Alain_42
    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>
    2
    1. KOBB
      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 ?
      0
  2. ghulit03
    jette un oeil ici --> https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

    A++
    0
    1. KOBB
      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
      0
    2. prosthetiks
      Comme une spreadsheet de chez google docs en somme ?
      0
    3. KOBB
      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
      0
  3. graffx Contributeur
    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
    0
    1. Alain_42
      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
      0
      2. KOBB
        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 ...
        0
        1. Alain_42
          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
          0
          1. KOBB
            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...
            0
            1. Alain_42
              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>
              0
              1. KOBB
                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 ...
                0
            2. Alain_42
              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 !
              0
              1. KOBB
                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 ^^
                0
            3. graffx Contributeur
              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 :)
              0
              1. Alain_42
                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>
                0
                1. KOBB
                  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
                  0
                2. graffx Contributeur
                  Pas mal, en fait j' avais bien mal compris! Sympa!
                  0
              2. Alain_42
                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 ?
                0

                Discussions similaires

                FOTOSE (allemagne)
                lix

                13 réponses