Js che crea linee di tabella mi aiutate a rifinirlo?

[mchorney]

Allora grazie all' aiuto Vostro e del mio Amico Emanuele che ha fatto quasi tutto da solo soo riuscito ad avvicinarmi al risultato che avevo in mente.

Ora il problema è che ho effettuato io delle modifiche al lavoro di ema e sapendone poco di js nonsono molto sicuro di ciò che ho fatto.

Mi date una controllata e mi aiutat a finire la piccolissima parte che manca?

In pratica questo sciprt chrea linee di tabella formata da campi text box in questo modo:

<input type=text name=campoA0><input type=text name=campoB0><input type=text name=campoC0>.......
<input type=text name=campoA1><input type=text name=campoB1><input type=text name=campoC1>.......
<input type=text name=campoA2><input type=text name=campoB2><input type=text name=campoC2>.......

Inoltre si ha la possibilità di cancellare una linea, per cui se cancello la line 2 mi ritroverò:

<input type=text name=campoA0><input type=text name=campoB0><input type=text name=campoC0>.......
<input type=text name=campoA1><input type=text name=campoB1><input type=text name=campoC1>.......

Ora ho aggiunto due parti

- Una che mi aggiunge alla linea un list box
- L'altra che mi aggiunge dopo la list box tre campi, in cui il terzo è la somma del primo e del secondo

Ora vorrei (e qui non ci riesco benchè abbia letto una discussione simile) avere da qualche parte (non fa parte della mia tabella) un campo text box che contiene la somma parziale del terzo campo che ho aggiunto (quello che contiene il prodotto dei primi due), ovviamente se cancello una riga della mai tabella vorre che questa somma parziale venisse decrementata del valore contenuto nel tezo campo.

é + difficile a spiegarsi che a farsi penso, allego ilcodice così sarà più facile capire.

Grazie, MC

[mchorney]

document.writeln("<table class=bordoTabellaTest border=0 cellpadding=0 cellspacing=1 width=100%>");
document.writeln("	<tr>");
document.writeln("		<td class=body valign=top>");
document.writeln("			<input type=text name='campoA0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;' maxlength=30 size=30>");
document.writeln("			<input type=text name='campoB0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;' maxlength=30 size=30>");
document.writeln("			<input type=text name='campoC0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;' maxlength=30 size=30>");
document.writeln("			<select name='campoD0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;'><OPTION value=1>Uno<OPTION VALUE=2>Due</SELECT>");
document.writeln("			<input type=text name='campoE0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;molt0(this.form);' maxlength=30 size=5>");
document.writeln("			<input type=text name='campoF0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;molt0(this.form);' maxlength=30 size=5>");
document.writeln("			<input type=text name='campoG0' onFocus='mustMoveFocus=true;currPos=0;' onBlur='mustMoveFocus=false;' maxlength=30 size=5>");
document.writeln("			<input type=button onClick='deleteLine(0);' value='Cancella'>");
document.writeln("			<div id=divDescription1></div></td>");
document.writeln("		</td>");
document.writeln("	</tr>");
document.writeln("</table>");
document.writeln("Usando 'freccia su' o 'freccia giù' puoi muoverti fra le varie righe.
");

document.onkeyup = keyUp;

var html='';
var mustMoveFocus=false;
var currPos=0;
var numLine=0; //numero di linee presenti (0 vuol dire che esiste sono la linea iniziale)

function setFormName(testForm){
	formName=testForm;
}

function molt0(f) { 
c1=parseFloat("0"+f.campoE0.value); 
c2=parseFloat("0"+f.campoF0.value); 
f.campoG0.value=c1*c2; 
} 

function molt(f,g) { 
c1=parseFloat("0"+f.elements['campoE'+g].value); 
c2=parseFloat("0"+f.elements['campoF'+g].value); 
f.elements['campoG'+g].value=c1*c2; 
} 


function addInsertLine(s){ //aggiunge una linea in fondo (se la penultima cella è piena)
	num=numLine+1;
	
	if(!eval("document.getElementById('divDescription"+(num)+"').innerHTML!=''")){ //evito che vengano cancellate le celle già create se torno in una cella all'inizio e scateno un evento che richiama questa funzione: perderei i dati già inseriti
		if(eval("document."+formName+".campoA"+(num-1)+".value")!='' || eval("document."+formName+".campoB"+(num-1)+".value")!='' || eval("document."+formName+".campoC"+(num-1)+".value")!='' || eval("document."+formName+".campoE"+(num-1)+".value")!='' || eval("document."+formName+".campoF"+(num-1)+".value")!='' || eval("document."+formName+".campoG"+(num-1)+".value")!=''){ //se è stato inserito qualcosa mostro la nuova riga, altrimenti no
			html="	<input type=text name='campoA"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;' maxlength=30 size=30>";
			html+="	<input type=text name='campoB"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;' maxlength=30 size=30>";
			html+="	<input type=text name='campoC"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;' maxlength=30 size=30>";
			html+="	<SELECT name='campoD"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;'><OPTION value=1>Uno<OPTION VALUE=2>Due</SELECT>";
			html+="	<input type=text name='campoE"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;molt(this.form,\""+num+"\");' maxlength=30 size=5>";
			html+="	<input type=text name='campoF"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;molt(this.form,\""+num+"\");' maxlength=30 size=5>";
			html+="	<input type=text name='campoG"+num+"' onFocus='mustMoveFocus=true;currPos="+num+";' onBlur='mustMoveFocus=false;' maxlength=30 size=5>";
			html+="	<input type=button onClick='deleteLine("+num+");' value='Cancella'>";
			html+="	<div id=divDescription"+(num+1)+"></div>\n";
			eval("document.getElementById('divDescription"+num+"').innerHTML=html");
			//alert(num+"\n"+eval("document.getElementById('divDescription"+num+"').innerHTML"));
			numLine++;
		}
	}
}

function deleteInsertLine(){ //toglie una linea in fondo (se la penultima è vuota)
	for(i=numLine;i>0;i--){
		if((eval("document."+formName+".campoA"+(i)+".value")=='' && eval("document."+formName+".campoB"+(i)+".value")=='' && eval("document."+formName+".campoC"+(i)+".value")=='' && eval("document."+formName+".campoE"+(i)+".value")=='' && eval("document."+formName+".campoF"+(i)+".value")=='' && eval("document."+formName+".campoG"+(i)+".value")=='') && (eval("document."+formName+".campoA"+(i-1)+".value")=='' && eval("document."+formName+".campoB"+(i-1)+".value")=='' && eval("document."+formName+".campoC"+(i-1)+".value")=='' && eval("document."+formName+".campoE"+(i-1)+".value")=='' && eval("document."+formName+".campoF"+(i-1)+".value")=='' && eval("document."+formName+".campoG"+(i-1)+".value")=='')){
			eval("document.getElementById('divDescription"+(i)+"').innerHTML=''");
			//alert (eval("document.getElementById('divDescription"+(i)+"').innerHTML")+"\n"+eval("document."+formName+".campoA"+(i-2)+".value"));
			//alert(i+"\n"+eval("document.getElementById('divDescription"+(i)+"').innerHTML"));
			numLine--;
		}
		else break;
	}
}

function keyUp(UpEvents){ //gestione degli eventi da tastiera
	//aggiunta di nuove righe
	
	//spostamento fra le varie celle
	if (!document.all) key=UpEvents.which;
	else key=window.event.keyCode;
	if(mustMoveFocus){
		
		//spostamenti fra le varie celle
		if (key == 38){  //up
			if(currPos!=0) eval("document."+formName+".campoA"+(currPos-1)+".focus()");
		}
		else if (key == 40 ){  //down
			if(eval("document."+formName+".campoA"+(currPos+1))) eval("document."+formName+".campoA"+(currPos+1)+".focus()");
		}
		
		//eliminazione delle linee di troppo
		else if (key == 8 || key == 46){  //backspace o delete
			deleteInsertLine();
		}
		
		//controllo se devo aggiungere una linea o no
		else addInsertLine(currPos+1);
	}
}

function insertOption(optionTextA,optionTextB,optionTextC,optionTextE,optionTextF,optionTextG){
	n=0;
	optionCode='';
	while(eval("document."+formName+".campoA"+n)){
		if(eval("document."+formName+".campoA"+n+".value")=='' && eval("document."+formName+".campoB"+n+".value")=='' && eval("document."+formName+".campoC"+n+".value")==''){
			eval("document."+formName+".campoA"+n+".value=optionTextA");
			eval("document."+formName+".campoB"+n+".value=optionTextB");
			eval("document."+formName+".campoC"+n+".value=optionTextC");
			eval("document."+formName+".campoE"+n+".value=optionTextE");
			eval("document."+formName+".campoF"+n+".value=optionTextF");
			eval("document."+formName+".campoG"+n+".value=optionTextG");
			break;
		}
		n++;
	}
	addInsertLine(n+1);
}

function deleteLine(numLineToDelete){
	for(i=numLineToDelete;i<numLine-1;i++){
		eval("document."+formName+".campoA"+(i)+".value=document."+formName+".campoA"+(i+1)+".value");
		eval("document."+formName+".campoB"+(i)+".value=document."+formName+".campoB"+(i+1)+".value");
		eval("document."+formName+".campoC"+(i)+".value=document."+formName+".campoC"+(i+1)+".value");
		eval("document."+formName+".campoE"+(i)+".value=document."+formName+".campoE"+(i+1)+".value");
		eval("document."+formName+".campoF"+(i)+".value=document."+formName+".campoF"+(i+1)+".value");
		eval("document."+formName+".campoG"+(i)+".value=document."+formName+".campoG"+(i+1)+".value");

		
	}
	eval("document."+formName+".campoA"+(i)+".value=''");
	eval("document."+formName+".campoB"+(i)+".value=''");
	eval("document."+formName+".campoC"+(i)+".value=''");
	eval("document."+formName+".campoE"+(i)+".value=''");
	eval("document."+formName+".campoF"+(i)+".value=''");
	eval("document."+formName+".campoG"+(i)+".value=''");

	
	deleteInsertLine();
}

[mchorney]

Anche se è superflua questa è la pagina html che lancia il tutto:

<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
</STYLE>

</HEAD>

<BODY>

<script>formName='formName';</script>
<FORM NAME="formName">

<script src='gestioneTabella.js'></script>

<INPUT TYPE="submit">

</form>
</BODY>
</HTML>

[mchorney]

Tutto il giorno che tento ma nulla, non ci riesco proprio.

[Mich_]

Ho dato uno sguardo veloce, ma non e` che sia riuscito a capire molto.

Intanto la variabile di nome "html" andrebbe cambiata. Non credo che sia un nome valido.

Poi usi una quantita` industriale di eval(). Sono deprecati e sono molto lenti. Si dovrebbe riuscire a fare il tutto senza eval().

Parli di inserire delle righe a pagina completa, e poi usi document.write(). Il .write() (o .writeln() ) si puo` usare solo durante l'apertura della pagina.

In complesso non posso dire che sia sbagliato, ma mi trovo in difficolta` a seguire il ragionamento e presenta varie cose molto dubbie.
In queste condizioni e` difficile poter intervenire con competenza.

[mchorney]

Mitch ti ringrazio molto per l'aiuto.

Putroppo lo script praticamente non l'ho fatto io, ho solo fatto delle piccole aggiunte.

L'unica cosa che posso dire è che fa quello che deve fare (almeno mi sembra).

Mi puoi solo suggerire come fare ad avere una casella che tiene il totale parziale?

dicamo che ho delle text box così:
<input type=text name campoA1>123
<imput type=teext name campoA2>256
<imput type=teext name campoA3>147
<imput type=teext name campoA4>145

Vorre che la casella contenesse all'innizio il valore di campoA1, poi quando viene creata la text box campoA2 contenesse il valore di questa sommato a quella precedente e così via.


Mi basta un suggerimento poi cerco di arrangiarmi.

Grazie, Mc

[Mich_]

Mi permetto di riscrivere il tuo HTML: come hai scritto tu ci sono vari errori.

<input type="text" name="campoA1" value="123" />123

<input type="text" name="campoA2" value="256" />256

<input type="text" name="campoA3" value="147" />147

<input type="text" name="campoA4" value="145" />145


Sai quale e` l'ultimo campo introdotto?
Non ci sono buchi? (cioe` non e` che manca il campoA3, mentre c'e` il campoA4)?

function somma(ff,ultimo) { 
            // ff contiene l'oggetto form
            // ultimo contiene il nome esatto del campo ultimo
  var som = 0;
  var i = 0;
  do {
    var ss = 'campoA'+i;
    var cc = ff.elements[ss];
    som += parseFloat(cc.value); // oppure parseInt(cc.value, 10);
    i++;
  } while(ss != ultimo);
ecc.
}

[mchorney]

Grazie Mich, ora me lo studio, in pratica vorrei integrarlo col codice che avevo postato in precedenza (quello dello script che crea le righe di tabella) e fare in modo che ogni volta che si genera una nuova riga il valore contenuto nell' ultima cella di questa venga inserito in una text box, poi quando dinamicamente viene creata un' altra riga il valore dell' ultima cella di questa viene sommato a quello precedente ecc.

Grazie, Mc

[mchorney]

Mich_ ci sono riuscito grazie mille per le dritte.

Ciao, MC

[mchorney]

Mich rompo ancora una volta, supponiamo che io cancelli il valore nel campo A3 e vorrei che il totale mi fosse aggiornato allora che devo fare?

Grazie, Mc