Ciao,
per poterti aiutarti occorre qualche chiarimento, intanto ti posto un primo codice, molto grezzo, su cui cominciare a ragionare.
codice:
<html>
<head>
<script type="text/javascript">
num_righe = 1;
function aggiungi_riga() {
num_righe++;
document.getElementById('prodotti').innerHTML += "
<input type='text' id='_" + num_righe + "'/>";
}
</script>
</head>
<body>
<div id='prodotti'>
<input type='text' id='_1'/>
</div>
<input type='button' value='aggiungi riga' onclick='aggiungi_riga();'/>
</body>
</html>
Come vedi non ho utilizzato una tabella ma una <div> che inizialmente contiene un solo campo a cui vengono aggiunti nuovi campi ad ogni click del pulsante.
Non so che conoscenze hai e se il codice ti è chiaro comunque, in breve, il click sul pulsante richiama una funzione javascript che individua la <div> (con getElementById), ne preleva il contenuto (con innerHTML) e gli accoda (operatore +=) un
e un nuovo tag <input>.
Un primo punto da chiarire è se ti serve proprio una tabella o se ti può andar bene una struttura come quella che ti ho proposto. Il fatto è che la tabella complica un po' la vita quindi sarebbe meglio farne a meno, però dipende dai dati che hai. Non sono molto esperto di questo ma credo che sostanzialmente si tratti di capire se i tuoi dati costituiscono un elenco, una lista, una tabella o se non rientrano in nessuna di queste categorie.
Bisogna poi individuare esattamente l'evento che deve provocare l'inserimento della riga. Nel mio esempio l'evento è il click sul pulsante ma non so se ti può andare bene, dipende da cosa intendi con "ogni volta che ne inserisce uno".
In altre parole bisogna capire se l'inserimento di un prodotto si considera concluso quando sono stati digitati tre caratteri oppure quando è stata inserita una stringa che corrisponde ad uno dei prodotti validi oppure quando il campo perde il focus o quando lo riceve oppure... dimmelo tu.
Tieni presente, ovviamente, che l'utente potrebbe inserire un prodotto e poi ripensarci e cancellarlo o modificarlo. E magari inserire un prodotto inesistente. Che deve succedere in questi casi?
C'è poi il problema del mantenimento dei valori già inseriti, infatti, come vedrai, il codice che ti ho postato (come ti dicevo è molto grezzo) svuota tutti i campi già caricati quando se ne inserisce uno nuovo. Per risolvere questo problema occorre memorizzare i dati in un array e ricaricarli ogni volta. Ma questo lo possiamo vedere dopo, per ora comincia a darmi qualche indicazione più precisa sulle cose che ti ho detto.
Ah già, tieni presente un'altra cosa, che tutto quello che ho detto presuppone che tu voglia fare tutta questa elaborazione lato client e inviare i dati al server solo alla fine ma questo non è così scontato, potresti invece aver bisogno di controllare e validare i dati via via che vengono inseriti. Per far questo bisognerebbe inviare ogni singolo prodotto al server e a quel punto sarebbe il server ad occuparsi di rimandare al client la pagina con gli eventuali messaggi d'errore e/o il nuovo campo vuoto per l'inserimento di un altro prodotto.
E aggiungo ancora una cosa, se i prodotti sono in numero finito e individuabili a priori, potresti fare una casella a discesa (una tendina) che li contiene tutti in modo che l'utente possa sceglierli senza dover digitare nulla e senza poter commettere errori. I prodotti così scelti verrebbero via via "trasferiti" in una textarea posta affianco alla tendina e inviati al server alla fine. Sarebbe molto più semplice, che ne pensi?
Rispondi quotando
