Ciao Sonia,
devo doverosamente premettere che in questo forum non si fanno i compiti per gli altri e questa, come mi hai detto in privato, è proprio una tesina scolastica, d'altra parte è anche vero che siamo stati tutti studenti e tutti ci siamo ridotti all'ultimo e poi comunque non sei completamente passiva ad aspettare l'aiuto ma ci stai provando a metterci del tuo quindi facciamo così, ti do un po' di spunti ma il lavoro vero lo lascio a te.
Tieni presente inoltre che questo per me è un periodo piuttosto pieno quindi non avrò molto tempo per il forum.
Detto questo facciamo qualche passo avanti:
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<script type="text/javascript">
num_righe_art = 1;
num_righe_mat = 1;
function aggiungi_riga_art() {
num_righe_art++;
document.getElementById('articoli').innerHTML += "
<input type='text' id='art_" + num_righe_art + "'/><input type='button' value='X' onclick='elimina_riga_art(\"" + num_righe_art + "\");'/>";
}
function aggiungi_riga_mat() {
num_righe_mat++;
document.getElementById('materie').innerHTML += "
<input type='text' id='mat_" + num_righe_mat + "'/><input type='button' value='X' onclick='elimina_riga_mat(\"" + num_righe_mat + "\");'/>";
}
</script>
<title> Tesina </title>
</head>
<body>
<font face="verdana">
<form method="post" action="insDatiIpotizzati.jsp">
<table align="center" cellpadding="20">
<tr>
<td align="center"><h2>INSERIRE I DATI IPOTIZZATI RICHIESTI</h2>
</td>
</tr>
<tr>
<td>
Inserire il nome di tutti gli articoli da produrre:
<div id="articoli">
<input type="text" name="nomeArt" maxlenght="10" id="art_1"/><input type='button' value='X' onclick='elimina_riga_art("1");'/>
</div>
<input type="button" value="aggiungi articolo" onclick="aggiungi_riga_art();"/>
</td>
</tr>
<tr>
<td>
Inserire il nome di tutte le materie prime da utilizzare nella produzione:
<div id="materie">
<input type="text" name="nomeMat" maxlenght="10" id="mat_1"/><input type='button' value='X' onclick='elimina_riga_mat("1");'/>
</div>
<input type="button" value="aggiungi materia" onclick="aggiungi_riga_mat();"/>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="AVANTI">
</td>
</tr>
</table>
</font>
</body>
</html>
Ti spiego cosa ho fatto e cosa c'è ancora da fare.
Per prima cosa ho riunito le due function in un unico tag script e le ho differenziate utilizzando "art" o "articoli" per la prima e "mat" o "materie" per la seconda, in modo che non si crei confusione.
Ho poi aggiunto un pulsante con una croce affianco ad ogni casella di testo. Questo pulsante servirà per eliminare la casella ma non è ancora attivo, bisognerà fare le function per gestirlo e poi non essendo attivo non ho potuto provarlo e non escludo che possa esserci qualche errore.
Nota la differenza fra il pulsante di inserimento riga e quello di cancellazione, l'inserimento è uno solo per ciascuna sezione (articoli e materie) perché inserisce una riga in fondo mentre i pulsanti di cancellazione sono uno per ogni casella di testo e devono puntare a quella casella specifica. Questo è il motivo per cui quando si chiama la funzione di inserimento non è necessario passare dei parametri mentre quando si chiama la funzione di cancellazione bisogna passare il numero di riga che si vuole cancellare e questo numero vale 1 per la prima casella di testo, quella inserita direttamente nel body mentre vale num_righe per quelli inseriti dalle function.
Il problema della larghezza diversa dei campi era dovuto alla size che avevi inserito solo nel primo tag (quello del body) e non anche nei tag creati dalle function quindi succedeva che il primo aveva una larghezza specifica mentre gli altri prendevano la larghezza di default. Io ho tolto le size ma se vuoi rimetticele, però mettile in tutti i tag.
Riguardo alla lettura dei dati dalla tua pagina jsp non ti posso aiutare perché non conosco il jsp però esisterà sicuramente qualche istruzione che faccia riferimento agli id dei tag inviati ed è per questo che ho dato ai tag degli id specifici (art_1, art_2, art_3 ecc... e mat_1, mat_2, mat_3 ecc...). Non dovrebbe essere difficile prelevarli e caricarli sul DB ma per questo ti rinvio alla sezione del forum sul jsp.
Quello che resta da fare, e non è poco, è la gestione dei dati inseriti per evitare che vadano persi quando si inserisce una nuova riga e le funzioni di cancellazione della riga.
Su questo prova a lavorare un po' da te, io cercherò di trovare un po' di tempo nei prossimi giorni.
Comunque bisognerà modificare la funzione di inserimento in modo che non si limiti a inserire una casella ma memorizzi in un array il contenuto delle caselle presenti e poi faccia un ciclo in cui rigeneri tutte le caselle inserendo in ciascuna la value corrispondente ai valori dell'array e, alla fine, un ulteriore casella vuota.
Ci sentiamo nei prossimi giorni e se qualcun altro ha più tempo di me e vuole intervenire è il benvenuto.
Ciao