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

iNCiTE Web

Aphex

iNCiTE Web

Aphex

iNCiTE Web

Aphex

Veuillez vous connecter pour commenter

Parcourir

Activité