Newsgroup: it.comp.lang.javascript
Titolo: aggiungere righe col click...

Ciao a tutti!!
Nell'applicazione che sto costruendo, ho bisogno di poter generare una riga in 
una tabella alla pressione di un tasto, ad esempio "aggiungi"... In questa riga 
ci saranno diverse celle con all'interno diversi campi di input...
Dato che queste righe aggiunte possono essere n... mi chiedevo se con qualche 
metodo del DOM si riusciva con javascript a farlo... senza ogni volta ricaricare 
la pagina e aggiungendola lato server e senza farne X nascoste da rendere 
visibili alla pressione dl tasto aggiungi...
Spero di essermi spiegato sufficientemente bene :)
Grazie a tutti!!
V

 ci saranno diverse celle con all'interno diversi campi di input...
E' fattibile ma non semplicissimo. Inizia a cercare con google un po' di
esempi (il primo che ho trovato è questo:
http://www.swish-db.com/tutorials/view.php/tid/381
)
Soprattutto occorrono sintassi diverse a seconda della compatibilità che
richiedi, e l'aggiunta del tag input è un po' un pacco per un bug di IE.
Cerca un po' e fai un po' di esperimenti, poi posta eventuali problemi.
-- 
"e mai che mi sia venuto in mente
 di essere più ubriaco di voi
 di essere molto più ubriaco di voi"
									  F.D.A.

 
Grazie mille! Ho risolto facendo come nell'esempio...
Oddio, per me era un po' piu' complicato perche' nelle celle della riga c'erano 
tag input e tag a... e' venuta fuori una funzione un po' lunghetta... ma va che 
e' una meraviglia :)
Ho fatto anche una funzione che cancella la riga e va pure quella...
Ora il mio problema e' un altro... e' possibile cancellare righe che non vengono 
create al volo ma che già esistono nativamente nell'html?
Ad esempio... per cancellare la riga creata uso una funzione fatta cosi':
function delLav(id)
{
	document.getElementById("tblInsLav").removeChild(id);
	idlavs -=1;
}
idlavs e' una mia variabile... e la funzione viene richiamata con un evento onClick:
delLav(document.getElementById('lav"+idlavs+"')
ora...
nella pagina html nativa ho una riga standard...
<tr id="nome">
...
</tr>
se faccio un link con il medesimo evento onClick e gli associo 
delLav(document.getElementById('nome'))
non va... la console js di ff mi dice che non trova il nodo...
Quindi mi e' sorta la domanda: cancellare elementi al volo si puo' fare solo 
quando questi sono anchessi generati al volo?
Io purtroppo ho bisogno di poter cancellare anche degli elementi da html puro... 
e farlo al volo sarebbe piu' carino che mettere un pulsante e far ricaricare la 
pagina...
Attendo illuminazioni :D
intanto grazie mille!
AH! Per il baco di IE non ho problemi... tanto faccio girare tutto su Firefox e 
non c'e' possibilità che venga cambiato browser ;)
V

 non c'e' possibilità che venga cambiato browser ;)
Pregiato


 function delRow(id)
Questo id è la posizione ordinale della riga, vero? il nome del parametro
"id" è fuorviante...
-- 
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"
B.M.

 
Si si quell'id e' il numero ordinale della riga... nel caso di questa funzione 
pero'...
Cmq.. alla fine l'ho abbandonata e non ho piu' dato la possibilità di cancellare 
righe da html puro... per ora... perche' quando facevo il submit del tutto... 
php mi da errori di campi non trovati... ci devo guardare bene...
Esiste in js una funziona che ti ricostruisce tutto l'albero html? cosi' magari 
quando faccio il submit...prima mi faccio stampare tutto su un alert o un 
confirm per vedere di cosa effettivamente faccio il submit...
Grazie mille ancora!
V

 }
Se "tblInsLav" è l'ID di una tabella stai sbagliando, nel momento in cui
"id" è un elemento TR.
Un elemento TR non è figlio diretto di un elemento TABLE, bensì suo nipote.
E' figlio di TBODY, che a sua volta è figlio di table. Anche se nel codice
HTML tu non lo specifichi, è implicito. Un'occhiata al DOM Inspector
dovrebbe chiarirti meglio la struttura di una tabella.
Una possibile riscrittura della tua funzione è la seguente:
function delLav ( el ){
	el.parentNode.removeChild(el);
}
N.B.
Ho letto che usi firefox, in alcune versioni di IE questa sintassi mi dava
talvolta problemi, risolvibili ponendo il riferimento all'elemento genitore
in una variabile di appoggio:
function delLav ( el ){
	var pn=el.parentNode;
	pn.removeChild(el);
}
-- 
ZER0
~ The Tangent Universe collapsed 6023 days, 12 hours, 50 minutes and 18 seconds ago.

 
Ok, terro' presente anche questo, nel caso dovessero' mai mettersi ad usare IE...
Grazie infinite ancora!
Esistono libri che trattano in maniera esauriente il DOM?
Saluti
V

 Esistono libri che trattano in maniera esauriente il DOM?
Probabilmente sì, ma per quanto mi riguarda sono dell'idea che il materiale
che si trova online è già sufficiente. Per il DOM standard puoi utilizzare
le technical reference del w3c. All'inizio ti sembreranno un po' criptiche
o dispersive, forse, ma passato il primo impatto ci trovi di tutto.
Volendo qualcosa di più specifico su Gecko (Firefox, Mozilla, Netscape..):
http://www.mozilla.org/docs/dom/domref/
Mentre, per quanto riguarda IE puoi andare su 
msdn.microsoft.com
:
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp
-- 
ZER0
~ The Tangent Universe collapsed 6023 days, 14 hours, 24 minutes and 51 seconds ago.

ZER0 ha scritto:

Perfetto grazie mille, cosi' facendo elimino effettivamente numerose righe di 
codice.. pero'... ho un problema... la mia riga da clonare e' fatta di numerosi 
campi di input... alcuni dei quali hidden...
Ecco la riga che clono:
<tr id="cloneobj">
   <td height="20" align="center" valign="middle"><input name="nr11" type="text" 
class="inputNumero" id="nr11" size="7" readonly></td>
   <td align="center" valign="middle"><input name="tipo11" type="text" 
class="inputText" id="tipo11" size="33" readonly></td>
   <td align="right" valign="middle">&euro; <input name="pr11" type="text" 
class="inputNumero" id="pr11" size="8" readonly>
   	<input name="hi11" type="hidden" class="inputText" id="hi11"></td>
   <td align="center" valign="middle">&euro; <input name="imbusto11" type="text" 
class="inputNumero" id="imbusto11" size="5" value="" readonly>
   	<input type="hidden" name="ma11" value="" id="ma11">
	<input type="hidden" name="op11" value="" id="op11">
	<input type="hidden" name="tlav11" value="" id="tlav11">
	<input type="hidden" name="pun11" value="" id="pun11">
	<input type="hidden" name="tel11" value="" id="tel11">
	<input type="hidden" name="tempot11" value="" id="tempot11">
	<input type="hidden" name="colori11" value="" id="colori11">
	<input type="hidden" name="pr_fm11" value="0.00" id="pr_fm11"></td>
   <td align="center" valign="middle"><a href="javascript:AddLav('11')"><img 
src="immagini/aggiungi.jpg" alt="Aggiungi lavorazione" width="15" height="15" 
border="0"></a></td>
   <td></td>
</tr>
Ora... io ho necessità che ad ogni aggiunta di una riga, devo poter cambiare 
tutti gli id dei vari input...
Come ci accedo?
ora la mia funzione e':
function addRowLav()
{
	var dolly = document.getElementById("cloneobj");
	riga = dolly.cloneNode(true);
	document.getElementById("tblInsLav").tBodies[0].appendChild(riga);
}
come faccio ad accedere ai vari input per cambiargli l'id?
Grazie mille ancora!
V

 Ecco la riga che clono:
[snip]
Non ha senso che tu tenga ID e NAME uguale, soprattutto in casi come
questi, dove l'ID non solo č inutile, ma "dannoso".
Del resto per quanto concerne i dati da inviare via get o post di una form,
il name č l'unica cosa che conta.
E dato che gli elementi input fanno parte di una "riga", sia a livello
logico che fisico, tenendo unicamente il name hai modo di accedervi tramite
indice ordinale.
Ti rammento che, inserendo dei campi con medesimo name, si va a creare un
array di elementi.
Un esempio pratico:
<table> 	
	<thead>
		<tr></tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="mytext" value="" /></td>
		</tr>		
		<tr>
			<td><input type="text" name="mytext" value="" /></td>
		</tr>		
		<tr>
			<td><input type="text" name="mytext" value="" /></td>
		</tr>		
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">
				<input type="button" value="add row" onclick="addRow()" />
			</td>
		</tr>
	</tfoot>
</table>
Come vedi il numero di elementi "mytext" corrisponde al numero di righe.
Quindi abbiamo una corrispondenza diretta:
// stampa il valore del primo campo mytext
alert(document.forms[0].mytext[0].value)
// stampa il valore del secondo campo mytext
alert(document.forms[0].mytext[1].value)
// stampa il valore del terzo campo mytext
alert(document.forms[0].mytext[2].value)
Ciņ torna utile nella creazione di righe dinamiche, in quanto ti dą la
possibilitą di ciclare tutti gli elementi che ti interessano.
Ergo: elimina gli id dagli elementi dinamici che sono dentro le righe da
clonare, mantenendo unicamente il name.
-- 
ZER0
~ The Tangent Universe collapsed 6024 days, 8 hours, 8 minutes and 34 seconds ago.

 
[CUT]
Si questo lo sapevo, solo che io non posso...o quanto meno non ho ancora trovato 
una soluzione...infatti se fai caso al codice della riga da clonare che avevo 
scritto c'e' un link ad una funzione javascript che mi apre un popup in cui 
vengono fatti dei conti in base a parametri che vengono inseriti a mano... dopo 
che sono stati fatti i conti vengono riempiti i campi hidden del chiamante 
(tutti quelli che sono nella riga da clonare), identificati col numero passato 
come argomento della funzione... non so se potrei fare anche in base al numero 
ordinale della riga... credo sia fattibile... cosi' evito di cambiare tutti gli 
id... ci provo...
Grassie!
V

 Grassie!
De nada.
-- 
ZER0
~ The Tangent Universe collapsed 6025 days, 3 hours, 30 minutes and 34 seconds ago.

 
Ho cominciato la revisione del mio codice per adeguarlo a questo approccio... 
per ora sta andando tutto bene ;)
Nel momento in cui la parte js funzionerà come deve, passo a correggere la parte 
php..
In quel popup che dicevo... mi riferisco ai campi della riga corrente in questo 
modo:
	myobj = opener.document.getElementById("tblInsLav").tBodies[0].rows;
	myobj[riga].getElementsByTagName("input").nr11.value = 0;
Ovviamente al posto di 0 ci sarà il valore calcolato che mi serve... pero' 
accedo in quella maniera.
Funziona tutto, ma vorrei sapere se ci sono metodi piu' rapidi.
Sto imparando una marea di cose nuove :) js non l'ho mai approfondito, mi 
limitavo a fare funzioncine di controllo banali... pero' e' una bella forza :)
Grazie mille ancora!
V

 limitavo a fare funzioncine di controllo banali... pero' e' una bella forza :)
Credo che Javascript sia il linguaggio più sottovalutato al mondo. :)
-- 
ZER0
~ The Tangent Universe collapsed 6025 days, 4 hours, 36 minutes and 46 seconds ago.