javascript colore tabella

**KakashiZombie** · 31-05-2008, 15:31

Ciao a tutti vi spiego subito il mio problema.
Ho una tabella da colorare con l'invio su un bottone che è collegato a una pagina javascript.
La tabella viene colorata ma il colore non rimane sulla pagina, se metto un alert box dopo il coloramento la tabella risulta colorata, skiaccio ok sull'alert box e il colore scompare qualcuno sa il perchè?

**KakashiZombie** · 03-06-2008, 15:34

UP!

**Xinod** · 03-06-2008, 15:55

forse ricarichi la pagina
certo e' che senza una riga di codice si puo' solo tirare a indovinare

**KakashiZombie** · 03-06-2008, 15:57

allora il codice della pagina index:

codice:

<html>
 <head >
  <title>Questionario</title>
  <style type="text/css">
    h1      {color: #FFCC00;  font-size: 25px;  font-family: Verdana; }
    
    button  {width: 120px;  height: 35px; border: 0;  cursor: pointer;  Text-align:center;  font:bold 20px/30px "Trebuchet MS",Arial,sans-serif;
            background: #55CB00 url(base.png) no-repeat 0 0;color:#FFF
            }

    button:hover{background-position: 0 -35px;color: #FFC}
    button:active{background-position: 0 -70px;color: #FFF}
        
   td { background-color: #FFFFAF; font-size: 12px; font-family: Verdana; }
  </style>


 <SCRIPT LANGUAGE="JavaScript" src="questionario.js">

</SCRIPT>


 </head>
<body onload="importXML();" "background="sfondo1.jpg" body vlink="white"body link="white">

<form method='post' name='form1' id='form1' >

<h2><h1 align="center"> Questionario</h1></h2>
<hr>
<div id="Stampa"></div>
<div id="Stampa1"></div>
<hr>
<h1 align="center">

<button input type="submit" name="invia" id="invia" value="Invia" onclick='controllo(); ' >Correggi</button>
<button><input type="reset" value="Reset">Reset</button></h1>
</form>




<form action="index.html">
<h1 align="center">
<button input type="submit" value="Cambia Materia"><font size=2>Cambia Materia</font></button>
</form>



</body>
</html>

la funzione controllo è la parte che mi colora la tabella.
se devo postare anke il js ditemelo

**Xinod** · 03-06-2008, 16:18

posta posta,
comunque stai inviando il form, la pagina si ricarica
quello che hai modificato non esiste piu', esiste il documento com era inizialmente

per evitare, il tutto va gestito nell' onsubmit del form (facendo ritornare false nel caso non vuoi si proceda all' invio),
non nell' onclick di un submit

p.s. i form non si annidano

**KakashiZombie** · 03-06-2008, 16:19

codice:

var caci,risp;
xmlDoc = null;
culo=0;
c=0;
c1="#FFFAF";
c2="#FFFAF";
c3="#FFFAF";
c4="#FFFAF";
base="#FFFFFF";
base2="#FFFF66";
que="#99CCFF";
sbagliato = "#FF3300";
giusto = "#00FF00";
var kammy = new Array(4);
//=========================================== PASSO MATERIA ===================================================================
var materia;
param_name=new Array();
param_value=new Array();

indirizzo=unescape(String(this.location));
params=indirizzo.split("?");
param=params[1].split("&");

for(i=0;i<param.length;i++){
param_temp=param[i].split("=");
param_name[i]=param_temp[0];
param_value[i]=param_temp[1];
materia = param_value[i];
if(isNaN(param_value[i])) eval("var "+param_name[i]+"='"+param_value[i]+"';");
else eval("var "+param[i]+";");
}
//=========================================== PASSO MATERIA ===================================================================

function importXML()
{

var XMLFile = materia;
	if (document.implementation && document.implementation.createDocument)
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = Visual;
		xmlDoc.load(XMLFile);

	}
	else if (window.ActiveXObject)
	{
		xmlDoc = new ActiveXObject("MSXML2.DOMDocument");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) Visual()
		};
		xmlDoc.load(XMLFile);

 	}
	else
	{
		alert('Your browser can\'t handle this script');
		return;
	}
}





function Visual()
{

  var x = xmlDoc.getElementsByTagName("domanda").length;
  var y = xmlDoc.getElementsByTagName("domanda");
  var text = "";
  for (i=0; i < x;i++)
  {
  if((i%2)==0){c1=base2;c2=base2;c3=base2;c4=base2;}else{c1=base;c2=base;c3=base;c4=base;}
   
  
	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
	text += "<tr>"
	text += "<td colspan='2'background='testo.jpg'>"
	text += "<font color=white>" + y[i].childNodes[0].nodeValue + "</font>"
    text +=  "</td>"     
    text +=  "</td>"
		text += "<tr>"
			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
			text += "</tr>"  
			text += "<tr>"
			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ y[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
			text += "</tr>"
	
			kammy[i] = y[i].getElementsByTagName("risp5")[0].childNodes[0].nodeValue;
	text += "</table>"
	text += "
"
	}
	text+="</body></html>";
Stampa.innerHTML = text;
return;
}	

function controllo()	
{
var text="";
vet = new Array(2);
vet[0]="risp"
vet[1]=1;
ciao = vet.join("");
var x = xmlDoc.getElementsByTagName("domanda");
var y = xmlDoc.getElementsByTagName("domanda").length;
cascii = document.getElementsByName(ciao).length;
f=0,caci=0,i=0, z=0, n=0,nr=0;

for (vet[1]=1, i=0; vet[1] <= y;vet[1]++, ciao = vet.join(""), i++,f++)
{	 
	text += "<table bgcolor='#F9F9F9' align='center' width='50%' border='1' bordercolor='#CCCCCC'>"
	text += "<tr>"
	text += "<td colspan='2'background='testo.jpg'>"
	text += "<font color=white>" + x[i].childNodes[0].nodeValue + "</font>"
    text +=  "</td>"     
    text +=  "</td>"
	scelta=0;
  	for (j=0; j<cascii; j++)
		{
			if(document.getElementsByName(ciao)[j].checked==true)//controlla se la casella è spuntata
			{
				scelta=document.getElementsByName(ciao)[j].value;
			}
		}
    if(scelta==0)//controllo se almeno una è selezionata, se è selezionata scelta avrà un valore diverso da 0
    { nr++;c1="orange";c2="orange";c3="orange";c4="orange"; }
    else
	{   	
	if(scelta!=kammy[f])  { n++;
			if (scelta==1){c1=sbagliato;}else{   if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
      if (scelta==2){c2=sbagliato;}else{   if((i%2)==0){c2=base2;}else{c2=base;}}
      if (scelta==3){c3=sbagliato;}else{   if((i%2)==0){c3=base2;}else{c3=base;}}
      if (scelta==4){c4=sbagliato;}else{   if((i%2)==0){c4=base2;}else{c4=base;}}
	}//se scelta è diversa da kammy(ke è quella giusta) si incrementa n(sbagliate)
	if(scelta==kammy[f])  { z++;
				if (scelta==1){c1=giusto;}else{if((i%2)==0){c1=base2;}else{c1=base;}}// rosso = #FF3300
        if (scelta==2){c2=giusto;}else{if((i%2)==0){c2=base2;}else{c2=base;}}
        if (scelta==3){c3=giusto;}else{if((i%2)==0){c3=base2;}else{c3=base;}}
        if (scelta==4){c4=giusto;}else{if((i%2)==0){c4=base2;}else{c4=base;}}
	}//se scelta è uguale a kammy(ke è quella giusta) si incrementa z(giuste)	
	}

		if(kammy[f]==1){c1=giusto} // verde = #00FF00
		if(kammy[f]==2){c2=giusto}
		if(kammy[f]==3){c3=giusto}
		if(kammy[f]==4){c4=giusto}
		
			text += "<tr>"
			text += "<td style='background-color:"+c1+";'width='50%'><input type='radio' class='caselle' value=\"1\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp1")[0].childNodes[0].nodeValue + "</td>"
			text += "<td style='background-color:"+c2+";'width='50%'><input type='radio' class='caselle' value=\"2\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp2")[0].childNodes[0].nodeValue + "</td>"
			text += "</tr>"  
			text += "<tr>"
			text += "<td style='background-color:"+c3+";'width='50%'><input type='radio' class='caselle' value=\"3\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp3")[0].childNodes[0].nodeValue +" </td>"
			text += "<td style='background-color:"+c4+";'width='50%'><input type='radio' class='caselle' value=\"4\" name=\"risp" + (i+1) + "\" >"+ x[i].getElementsByTagName("risp4")[0].childNodes[0].nodeValue +" </td>"
			text += "</tr>"
				text += "</table>"
	text += "
"
	
}
text += "<hr>"
	text += "<table bgcolor='#F9F9F9' align='center' width='500' border='1' bordercolor='#CCCCCC'>"
	text += "<tr>"
	text += "<td style='background-color:"+giusto+";'><center>Risposte corrette</td>"
	text += "<td style='background-color:"+sbagliato+";'><center>Risposte sbagliate</td>"
	text += "<td style='background-color:orange'><center>Risposte non selezionate</td>"
	text += "</tr>"
	text +="<tr><td style='background-color:"+giusto+";'><center>"+z+"</td>"
	text +="<td style='background-color:"+sbagliato+";'><center>"+n+"</td>"
	text +="<td style='background-color:orange'><center>"+nr+"</td>"
	text += "</table>"

text+="</body></html>";
alert(text);
Stampa.innerHTML = text;
alert(Stampa);
return;
}

io richiamo l'imporatzione dell'xml con la funzione ImportXml di seguito viene eseguita la funzione visual.
Quando dall'html richiamo la funzione controllo la esegue, colora ma non rimane.
non è alla portata di tutti ma non è nemmeno troppo difficile, spero che qualcuno possa aiutarmi.
P.S. ho modificato il codice della pagina index riguardalo adesso è come c'e l'ho

**KakashiZombie** · 03-06-2008, 19:33

raga per farvi provare come funziona vi posto il codice xml, cosi provandolo capite meglio il problema e magari riuscite voi a risolvermelo:

codice:

<Informatica>
<domanda>
	Il nome dell'ultimo sistema operativo microsoft?
	<risp1>Vista</risp1>
      <risp2>Longhorn</risp2>
      <risp3>2008</risp3>
      <risp4>2007</risp4>
	  <risp5>1</risp5>
	</domanda>
 </Informatica>

questo lo salvate come file.xml

poi nel codice js ke vedete sopra sostituite nella funzione importxml:

codice:

 var XMLFile = materia;

codice:

var XMLFile = "file.xml";

**KakashiZombie** · 04-06-2008, 16:02

UP!

**Xinod** · 04-06-2008, 16:17

ti ho gia' detto quello che va fatto

<form onsubmit="return controllo()">

la funzione controllo, che ora ritorna implicitamente true (quel "return" a fine funzione)
deve ritornare true (per inviare il form) o false (per non inviare)

codice:

return false;

e lo sai tu se, quando e come inviare

poi questo, da cui devi rimuovere l' onclick,

codice:

<button input type="submit" name="invia" id="invia" value="Invia" onclick='controllo(); ' >Correggi</button>

a me suona comunque errato: o e' un input o e' un button

**KakashiZombie** · 04-06-2008, 16:23

no button è per i css

Discussione: javascript colore tabella

Strumenti discussione

Ricerca discussione

Visualizza

javascript colore tabella

Permessi di invio