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

In data Sat, 23 Apr 2005 18:33:01 GMT, ViandanteOscuro ha scritto:

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...
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.

Cristiano Larghi ha scritto:

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.

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(i d);
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

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

In data Tue, 26 Apr 2005 13:31:20 GMT, ViandanteOscuro ha scritto:

Ora il mio problema e' un altro... e' possibile cancellare righe che non vengono
create al volo ma che già esistono nativamente nell'html?
Boh, io normalmente le nascondo

(document.getElementById("tblInsLav").style.displa y="none"

Ad esempio... per cancellare la riga creata uso una funzione fatta cosi':
function delLav(id)
{
document.getElementById("tblInsLav").removeChild(i d);
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...
L'onclick è sulla riga stessa? del tipo (metti sia una immagine dentro una

td dentro una tr) onclick=delLav(this.parentNode.parentNode) come si
comporta?
Comunque sia, in generale, c'è qualcosa che non va se non trova l'oggetto
(quel "nome" non è che è proprio il name? Perché devi ovviamente usare
l'id, non il name). Se è il name devi cambiare con
document.getElementsByName('nome')[0]

AH! Per il baco di IE non ho problemi... tanto faccio girare tutto su Firefox e
non c'e' possibilità che venga cambiato browser
Pregiato

--
"e mai che mi sia venuto in mente
di essere più ubriaco di voi
di essere molto più ubriaco di voi"
F.D.A.

Cristiano Larghi ha scritto:

Boh, io normalmente le nascondo
(document.getElementById("tblInsLav").style.displa y="none"

Nasconderle non mi andrebbe bene... ci sono campi del form... e verrebbero
mandati lo stesso (almeno credo ) e a me se uno mi cancella una riga e'
perche' i dati presenti in quella riga non gli servono

L'onclick è sulla riga stessa? del tipo (metti sia una immagine dentro una
td dentro una tr) onclick=delLav(this.parentNode.parentNode) come si
comporta?
Comunque sia, in generale, c'è qualcosa che non va se non trova l'oggetto
(quel "nome" non è che è proprio il name? Perché devi ovviamente usare
l'id, non il name). Se è il name devi cambiare con
document.getElementsByName('nome')[0]

No quel "nome" e' proprio l'id... lo setto esattamente nello stesso modo in cui
lo setto quando aggiungo una riga al volo... quindi e' corretto dato che la riga
generata al volo viene cancellata...

Cmq ho risolto in un'altra maniera... ho fatto un'altra funzione che fa cosi':

function delRow(id)
{
tbl = document.getElementById("tblInsLav");

tbl.deleteRow(id);
idlavs-= 1;
}

e la uso solo per cancellare le righe da html puro... quelle generate al volo
usano sempre quella funzione delLav(...)

ovviamente tutto sto caos sta in una pagina php che viene generata
dinamicamente... cosi' posso associare gli id giusti per la cancellazione

Grazie ancora per l'aiuto!

V

In data Tue, 26 Apr 2005 13:58:23 GMT, ViandanteOscuro ha scritto:

[CUT]

No quel "nome" e' proprio l'id... lo setto esattamente nello stesso modo in cui
lo setto quando aggiungo una riga al volo... quindi e' corretto dato che la riga
generata al volo viene cancellata...
E allora c'è qualche altro problema

Cmq ho risolto in un'altra maniera... ho fatto un'altra funzione che fa cosi':
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.

Cristiano Larghi ha scritto:

E allora c'è qualche altro problema

Boh non so... ho provato anche a fare un bell'alert prima del removechild... e

mi da l'identificativo giusto...HTMLRowTable o qualcosa genere...

Cmq ho risolto in un'altra maniera... ho fatto un'altra funzione che fa cosi':
function delRow(id)

Questo id è la posizione ordinale della riga, vero? il nome del parametro
"id" è fuorviante...

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

On Tue, 26 Apr 2005 13:31:20 GMT, ViandanteOscuro wrote:

[cut]

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

Per questo genere di cose ti conviene "clonare" un nodo che funge da
prototipo. Il codice JS si riduce notevolmente.

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?

Non c'è alcuna differenza.

Ad esempio... per cancellare la riga creata uso una funzione fatta cosi':

function delLav(id)
{
document.getElementById("tblInsLav").removeChild(i d);
idlavs -=1;
}

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.

ZER0 ha scritto:

Per questo genere di cose ti conviene "clonare" un nodo che funge da
prototipo. Il codice JS si riduce notevolmente.

Ci avevo pensato...

mi potresti postare un esempio? grazie!
Poi pero' come si comporta nel momento del submit? alla stessa maniera di come
faccio io ora?

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);
}

GRAZIE!
Cosi' facendo riesco anche a cancellare le righe da html statico!
Mi devo guardare bene il DOM Inspector... anche se sinceramente non ci capisco
molto...

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);
}

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

On Wed, 27 Apr 2005 18:40:40 GMT, ViandanteOscuro wrote:

Ci avevo pensato...
mi potresti postare un esempio? grazie!

<script type="text/javascript">
function addRow(){
var dolly=document.getElementById("dolly-sheep"),
newDolly=dolly.cloneNode(true);

newDolly.removeAttribute("id");
dolly.parentNode.appendChild(newDolly);
}
</script>
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr id="dolly-sheep">
<td><input type="text" name="txt-weapon" value="" /></td>
<td><a href="#">null link</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input type="button" value="add row" onclick="addRow()" />
</td>
</tr>
</tfoot>
</table>

In IE devi stare attento: ti clona i valori che ha in quel momento
l'oggetto JS, invece di prenderti gli attributi effettivamente impostati da
HTML. Per intenderci, se l'utente cambia il value del campo input, e poi
aggiunge una riga, la riga aggiunta riporterà il medesimo valore appena
scritto.

In ogni caso, puoi sempre - sia in FF che in IE - accedere agli elementi
figli appena clonati, sia prima che dopo averli aggiunti, e cambiarne gli
attributi o valori.

N.B.
Nel codice che ti ho scritto ho semplicemente rimosso l'attributo ID, dato
che deve essere univoco ed è quindi errato "clonare" anch'esso.

Se vuoi, invece che rimuoverlo, puoi associare un valore differente. Ma se
non ti serve per uno scopo ben preciso, puoi evitare di farlo, e riferirti
alle celle in modo ordinale.

Poi pero' come si comporta nel momento del submit? alla stessa maniera di come
faccio io ora?

Ovvero?

Ignoro come si comporti adesso, o cos'è che vai a creare in questo momento.

Una possibile riscrittura della tua funzione è la seguente:

function delLav ( el ){
el.parentNode.removeChild(el);
}


GRAZIE!
Cosi' facendo riesco anche a cancellare le righe da html statico!

Bada bene, che prima nell'inserire le righe stavi sbagliando, allora. Se
quella funzione ti andava sugli elementi creati dinamicamente, significa
che le aggiungevi direttamente all'elemento TABLE, invece che TBODY.
Devi aggiungerle a quest'ultimo. Quindi ti consiglio di modificare la tua
funzione che aggiunge righe, se non la sostituisci con il cloning, in modo
che le aggiunga al tbody:

document.getElementById("tblInsLav").tBodies[0].appendChild ( newTR );

Oppure dare un id al tbody.

Mi devo guardare bene il DOM Inspector... anche se sinceramente non ci capisco
molto...

Beh, non è troppo complicato. Sulla sinistra c'è la rappresentazione
gerarchica del documento corrente. C'è un albero che mostra tutti gli
elementi, e già da quello capisci come la pagina è strutturata.
Sulla destra invece ci sono i vari attributi dell'elemento che stai
osservando. Puoi vederne l'oggetto Javascript che lo rappresenta, o i CSS
applicati a tale elemento.. e così via.

E' utilissimo per lo sviluppo web.

[cut]

Ok, terro' presente anche questo, nel caso dovessero' mai mettersi ad usare IE...

Non credo che su IE6 dia di questi problemi. Era una sorta di "baco" che mi
capitava, e nemmeno sempre, su IE5 o IE5.5 installato su un certo windows
(non ricordo se XP, NT, 2K o che).

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/a...ence_entry.asp

--
ZER0

~ The Tangent Universe collapsed 6023 days, 14 hours, 24 minutes and 51 seconds ago.