Comment ajouter valeur a mon tableau

Aphex · 6 Décembre 2007

bonjour j'ai cree un petit formulaire dont voici le code

<html>
	<head>
		<title>
			Petits z'exos
		</title>
		<script type="text/javascript">


			sURL = unescape(window.location.pathname);

			function afficher()
			{
					valeur = document.fmFormulaire.message1.value;
					alert("Vous avez saisi "+valeur);				
				//	window.location.href = sURL;
				window.location.replace( sURL );



					//create();
			}

			function donner_focus(chp)
			{
				//document.getElementById(chp).focus();
				document.fmFormulaire.message1.focus();
			}

			function chiffres(event) 
			{

				if(!event&&window.event) 
				{
					event=window.event;
				}

				if(event.keyCode < 48 || event.keyCode > 57) 
				{
					event.returnValue = false;
					event.cancelBubble = true;
				}

				if(event.which < 48 || event.which > 57) 
				{
					event.preventDefault();
					event.stopPropagation();
				}
				if (event.keyCode == 13) 
				{
					verifierValeur();
				}
			}


			function verifierValeur()
			{
				var valeur = document.fmFormulaire.message1.value;

				if (valeur == parseInt(valeur))
				{

					if ( valeur == null || ((valeur > 1) && (valeur< 11)))
					{

					}
					else
					{
						alert("La valeur doit être non nulle et comprise entre 2 et 10, ici la valeur vaut: "+valeur);
						donner_focus("message1");
					}
				}
				else
				{
					alert("La valeur doit être de type numérique, non nulle et comprise entre 2 et 10, ici la valeur vaut: "+valeur);
					donner_focus("message1");
				}

			}

			navvers = navigator.appVersion.substring(0,1);
			if (navvers > 3)
			   navok = true;
			else
			   navok = false;

			today = new Date;

			numero = today.getDate();
			if (numero<10)
			   numero = "0"+numero;
			mois = today.getMonth();
			if (navok)
			   annee = today.getFullYear();
			else
			   annee = today.getYear();
			TabMois = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
			messageDate1 = numero + "/" + TabMois[mois] + "/" + annee;
			numero = today.getDate()+1;
			messageDate2 = numero + "/" + TabMois[mois] + "/" + annee;
			numero = today.getDate()+2;
			messageDate3 = numero + "/" + TabMois[mois] + "/" + annee;
			numero = today.getDate()+3;
			messageDate4 = numero + "/" + TabMois[mois] + "/" + annee;
			numero = today.getDate()+4;
			messageDate5 = numero + "/" + TabMois[mois] + "/" + annee;
			numero = today.getDate()+5;
			messageDate6 = numero + "/" + TabMois[mois] + "/" + annee;
			var tableauenom = new Array("Resources","Nadine","Louis","Jean","Paul","Marc","Louise","Karine","Alicia","Franck");
			var tableauDate = new Array(messageDate1,messageDate2,messageDate3,messageDate4,messageDate5,messageDa
te
6);



		</script>
	</head>	
	<body >

		<form name="fmFormulaire" method="GET" action = "Copie de exos.html">
		<input type="text" name="message1" id="message1"  size="10" onkeypress="chiffres(event)" onChange="verifierValeur()" >
		<input type="button" value="Ok" onclick="afficher()">
		<br>
		<br>
		<script type="text/javascript">
			tableauGenerer = "";
			// On affecte les saisies a des variables
			var cellspacing = 0;
			var cellpadding = 2;
			var width = 0;
			var border = 1;
			var lignes = 10;
			var colonnes = 6;
			var tbody = false;

			alert(document.fmFormulaire.message1.value);
			//valeur =0;	
			if(document.fmFormulaire.message1.value == "")
			{
				valeur =0;	
			}
			else
			{
				valeur = document.fmFormulaire.message1.value;	
			}



			// Debut de l'ecriture du tableau dans le champ resultat
			tableauGenerer = '<table ';

			// on affecte chaque variable a son attribut dans le tableau
			tableauGenerer += 'cellspacing="' + cellspacing + '" ';
			tableauGenerer += 'cellpadding="' + cellpadding + '" ';
			tableauGenerer += 'width="' + width + '" ';
			tableauGenerer += 'border="' + border + '">\n';

			// on cree chaque ligne
			for ( i = 0; i < lignes; i++ ) 
			{
				tableauGenerer += '\t<tr>\n';
				if(i==0)
				{
					//tableauGenerer += '\t<thead>\n';
					tableauGenerer += '\t\t<th bgcolor="yellow">'+tableauenom[i]+'</th>\n';

				}
				else
				{
					if(tbody == true)
					{

						//tableauGenerer += '\t</tbody>\n';
					}
					//tableauGenerer += '\t<tbody>\n';
					tableauGenerer += '\t\t<td align="left"><b>'+tableauenom[i]+'</b></td>\n';
				}
				// on cree chaque colonne
				for ( j = 0; j < colonnes; j++ )
				{
					if(i==0)
					{
						tableauGenerer += '\t\t<td bgcolor="yellow">'+tableauDate[j]+'</td>\n';	
						//tableauGenerer += '\t</thead>\n';

						//tableauGenerer += '\t<thead>\n';							
					}
					else
					{
						var ajout = 0;
						var ajout =  i+parseInt(valeur);
						tableauGenerer += '\t\t<td align="center">'+ajout+'</td>\n';
						tbody=true;

					}
				}

				// fermeture de chaque ligne
				tableauGenerer += '\t</tr>\n';
			}
			/*tableauGenerer += '\t<tfoot>\n';
			tableauGenerer += 'test';
			tableauGenerer += '\t</tfoot>\n';*/
			// fermeture du tableau
			tableauGenerer += '</table>';
			tableauGenerer += '</form>';				

			document.write(tableauGenerer);
		</script>


	</body>
</html>

mais cela ne fonctionne pas comme je le souhaite, je voudrais que qunad j insere une valeur et clique sur "OK", qu'elle soit additionner aux autres valeurs présent dans mon tableau. J'ai un pb de rafraichissement qui m enerve :mad2:

**iNCiTE Web** · 7 Décembre 2007

Ligne 16 j'aurais mis :

window.location.reload();

Aphex · 7 Décembre 2007

Merci pour cette réponse :thumbsup: Mais lorsque je rentre ma valeur 6 elle ne ajoute pas j 'ai l impression que le reload redessine la page comme ci c'etait la premiere execution. Pourrais - tu me donner une piste en ce qui concerne mon tableau, j ai rajouté une colonne TOTAL et je doit refaire le total a chaque insertion d'une nouvelle valeur, comment recuperer chaque cellules ?

Modifié 7 Décembre 2007 par Aphex

**iNCiTE Web** · 7 Décembre 2007

Le chiffre saisi est sensé d'additionner ou ? je n'ai pas bien compris la finalité...

Aphex · 7 Décembre 2007

je dois rajouter une ligne total qui fait le total par colonne et lorsque l on rentre une nvelle donnée on met a jour le tableau

**iNCiTE Web** · 7 Décembre 2007

Oui mais le chiffre que l'on rentre, il s'additionne à quoi ?

Aphex · 20 Décembre 2007

DE retour je viens poster mon code final sa pourrais servir

Tableau.htm

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />

<script LANGUAGE="JavaScript">

var tab=new Array('Drogba','Ronaldo','KAKA','Henry','Ribiery','Roney','Quaressma','Pauleta','Nasri');
var tab2= new Array('5',8,3,10,12,2);
var num=null;



function NonNul (b) {

	if ((b<2) || (b>10) || (b==null)){
	alert ("la valeur saisie est incorrecte ");	
	return true;	
	}
	else return false;
}
function recup(e) {
	//if (!e && window.e) { event=window.e;}
	if( (e.keyCode > 31) && ((e.keyCode<45) || (e.keyCode>57))) return e.returnValue=false;
}

function addDays(d,j){
 return new Date(d.getTime() + (1000 * 60 * 60 * 24 * j));
}

function ad (o,n){
  i=n;
  return o+i;

}

function addTab (s,t1,t2) {

	for (var j=0;j<t1.length;j++) {
		for (var i=0;i<t2.length;i++) {
			var ind=i.toString()+j.toString();
			var obj=document.getElementById(ind).innerHTML;
			obj=Number(obj);
			//obj+=s;
			document.getElementById(ind).innerHTML=ad(obj,s);
			}	
	}	
	control();
 }

 //n numero de la colonne
 //t taille de la colonne
 function somCol(t,n) {
 var som=0;
 	for (var j=0;j<t;j++) {
				var ind=n.toString()+j.toString();
				var obj=document.getElementById(ind).innerHTML;	
				som+=Number(obj);
	}

	return som;

 }  


function control(){

 	 for (var i=0;i<tab2.length;i++) {
		if (document.getElementById("cumul").checked) {	
			 S[i].style.visibility="visible";
			 S[i].innerHTML=somCol(tab.length,i);

		}		
		else S[i].style.visibility="hidden";	
	}

}

//n position de ligne
function RecopInput(n) {

	for(var i=0;i<tab2.length;i++) {
		var ind=i.toString()+n.toString();
		var obj=document.getElementById(ind).innerHTML;
		var ind2="Inp"+i.toString(); 
		document.getElementById(ind2).value=obj;	
	}

	ControleLigne(n);
	num=n;
}

function RemplaceLigne (n) {
	for(var i=0;i<tab2.length;i++) {
		var ind=i.toString()+n.toString();
		var ind2="Inp"+i.toString(); 
		document.getElementById(ind).innerHTML=document.getElementById(ind2).value;
	}
	control();
} 


function ControleLigne(n) {

		document.getElementById(n).className='dessus';
		document.getElementById(n).onmouseout=function (){null};

		if((num!=null) && (n!=num)) {
			var m=num%2;
			document.getElementById(num).className='ligne'+m;
			document.getElementById(num).onmouseout=function (){this.className='ligne'+m;}

		}
}

function MontrerMenu() {

	// Disance par rapport aux bords de la fenetre
	var EspaceDroit = document.body.clientWidth-event.clientX;
	var EspaceBas = document.body.clientHeight-event.clientY;

	// Affichage du menu suivant la position du curseur
	if (EspaceDroit < CMenu.offsetWidth)
	document.getElementById("CMenu").style.left = document.body.scrollLeft + event.clientX - document.getElementById("CMenu").offsetWidth;
	else
	document.getElementById("CMenu").style.left = document.body.scrollLeft + event.clientX;

	if (EspaceBas < CMenu.offsetHeight){
	document.getElementById("CMenu").style.top = document.body.scrollTop + event.clientY - document.getElementById("CMenu").offsetHeight; }
	else{
	document.getElementById("CMenu").style.top = document.body.scrollTop + event.clientY; }

	// Affichage du menu
	document.getElementById("CMenu").style.visibility = "visible";
	return false;
}

function MasquerMenu(){document.getElementById("CMenu").style.visibility = "hidden";} 	

</SCRIPT>



</HEAD>
<BODY> 
<DIV id="CMenu" class="ContextMenu" style="visibility:hidden;" >
  <TABLE width="100"  style="display:inline;">  
  <TR height="20" onclick="" onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';"> 
	<TD>Insérer</TD>
  </TR>
  <TR height="20" onclick="" onMouseOut="this.className='ContextMenuOut';" onMouseOver="this.className='ContextMenuOver';"> 
	<TD>Supprimer</TD>
  </TR>
  </TABLE>
</DIV>


<script language="JavaScript">
   if (document.all ) {

	//document.Tbody.oncontextmenu = MontrerMenu; 
	document.body.onclick = MasquerMenu;
   }
</script> 

<FORM >
<input type="text" name="bibi" id="bibi" onKeyDown="recup(event)" onChange=" if (NonNul(this.value)) this.focus();" >
<input type="button" value="affiche" onClick="addTab(Number(bibi.value),tab,tab2)">

<BR>
<BR>
<TABLE class='table1'>
	<THEAD>
	<TR>
		<TD id="R">Buts</TD>		
		<script type="text/javascript"> 
		d=new Date();
		for (var i=0;i<tab2.length;i++) {	
			document.write("<TD>" + addDays(d,i).toLocaleDateString()+ "</TD>");		
		}
		</script>
	</TR>	
	</THEAD>
	<TBODY >
	<script type="text/javascript"> 
		for (var j=0;j<tab.length;j++) {
		var n=j%2;
		document.write ("<TR class='ligne"+n+"' id='"+j+"' oncontextmenu=\"MontrerMenu();return false;\" onClick=\"RecopInput("+j+")\" onMouseOver=\"this.className='dessus'\" onMouseOut=\"this.className='ligne"+n+"'\" ><TD class='coltitre' >" + tab[j] + "</TD>");

			for (var i=0;i<tab2.length;i++) {	
			var ind=i.toString()+j.toString();
			document.write("<TD id='"+ind+"' class='colchiffre'>" + tab2[i] + "</TD>");		
			}
		document.write("</TR>");
		}	
		</script>		
	</TBODY>
	<TFOOT>
	<TR>
		<TD id="T">Totaux <input type="checkbox" name="cumul" onClick="control()"></TD>		

	<script type="text/javascript">

		for (var i=0;i<tab2.length;i++) {
			document.write("<TD id='S' class='colchiffre'> </TD>");			

		}
		</script>
	</TR>	
	</TFOOT>
	</TABLE>

	<BR>


	<BR>
	<TABLE>
	<TR>
		<TD class='coltitre'>Zone de Saisie</TD>
		<script type="text/javascript">

		for (var i=0;i<tab2.length;i++) {
				document.write("<TD ><input type=text id='Inp"+i+"' size=10  class='colchiffre'></TD>");			

			}		
			</script>
		<TD><input type="button" value="Remplace" onClick="RemplaceLigne(num)"></TD>
	</TR>		

	</TABLE>
</FORM>
</BODY>
</HTML>

style.css

body { 
	font-family:Verdana; 
	}

input { font-size:11pt; font-family:Verdana; }

.table1 {
	border: 2px #000000;
	border-collapse: collapse;
}

thead{
	font-weight:bold;
	color:#333399; 
	background:#0099CC;
}
td { font-size:11pt;border: 1px solid #000000; font-family:Verdana;width:100px; }


tr { font-size:11pt;font-family:Verdana; }

tfoot {
	font-weight:bold;
	color:#000000; 
	background:#FFCC66;
}
.coltitre {font-weight:bold;}
.dessus {background:#660066; color:#FFFFFF;}
.ligne1 {background:#FFCCCC;}
.ligne0 {background:#FFFFFF;}
.colchiffre{text-align:center;}


.ContextMenu {
cursor:default;
position:relative;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background:#FFFFFF;
border:1 px;
visibility:hidden;

}

.ContextMenuOver{
color:white;
font-size:11;
font-weight:700;
background:#660066;
}

.ContextMenuOut{
color:black;
font-size:11;
font-weight:500;
background:;
}

Connexion

Comment ajouter valeur a mon tableau

Sujets conseillés

Aphex

Lien vers le commentaire

Partager sur d’autres sites

iNCiTE Web

Lien vers le commentaire

Partager sur d’autres sites

Aphex

Lien vers le commentaire

Partager sur d’autres sites

iNCiTE Web

Lien vers le commentaire

Partager sur d’autres sites

Aphex

Lien vers le commentaire

Partager sur d’autres sites

iNCiTE Web

Lien vers le commentaire

Partager sur d’autres sites

Aphex

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité