errore su creazione dinamica di campi in un form

[albx87]

Ciao a tutti, stavo provando a scrivere un piccolo script per creare dinamicamente campi di un form...lo script funziona nel senso che crea correttamente i campi però c'è un problema.
Allora...ho un form per inserire una serie di servizi per un viaggio (ad esempio, volo, albergo, etc.) ed il loro relativo costo...al click di un link vorrei creare un nuovo input e fin li nessun problema...ecco il codice:

/*---------------- pagina html -----------------------*/

<table width="400">
  <tr>
    <td width="170"><label><span class="Stile8">Servizio</span></label></td>
    <td width="100"><label><span class="Stile8">Costo</span></label></td>
  </tr>
  <tr id="1">
    <td width="170"><input type="text" name="servizio1" id="servizio1" class="Stile8" size="25" /></td>
    <td>€ <input type="text" name="costo1" id="costo1" class="Stile8" size="5" /></td>
  </tr>
  <div id="more_fields"></div>
  <tr>
    <td><span class="Stile9">Aggiungi un campo</span></td>
     <td><span class="Stile9">Rimuovi un campo</span></td>
  </tr>
        		
  <input type="hidden" id="num_fields" name="num_fields" />
</table>

/*---------------- funzione js -----------------*/

function addField(){
	var maxValue;
	
	if(!document.listaform.num_fields.value){
		maxValue = 1; 	
	}
	else{
		maxValue = parseInt(document.listaform.num_fields.value);    // prendo il valore di num_fields
	}
	alert(maxValue);
	
	var div = document.getElementById("more_fields");           // prendo il div vuoto
	var id = maxValue+1;                             // aggiorno l'id
	div.innerHTML = "<tr id=\""+id+"\"><td width=\"170\"><input type=\"text\" name=\"servizio"+id+"\" id=\"servizio"+id+"\" class=\"Stile8\" size=\"25\" /></td><td>€ <input type=\"text\" name=\"costo"+id+"\" id=\"costo"+id+"\" class=\"Stile8\" size=\"5\" /></td></tr>";    // scrivo nel div vuoto
	document.listaform.num_fields.value = id;                 // aggiorno il valore del numero di campi
}

come vedete dal codice ho un campo fisso con 2 text e al click del link Aggiungi un campo prendo il div vuoto e gli scrivo dentro facendo poi il controllo sul numero massimo di indice che è salvato nell'hidden....il problema sta che mi stampa i 2 input creati sopra quelli gia esistenti e non sotto come dovrebbe essere visto che il div in cui scrivo sta sotto...sono sicuro che è un errore stupido...ma proprio non ci arrivo....grazie a tutti!

[bstefano79]

perchè la tabella è formattatata male
non puoi mettere un div in mezzo alle righe

[albx87]

scusate ero distratto....ho pubblicato nella sezione sbagliata....non riesco a cancellare sta discussione adesso....chiedo scusa.

[albx87]

ah ok...capito...immaginavo fosse un errore di html...grazie mille!

[bstefano79]

guarda come si costruisce dinamicamente con javascript una tabella

vedi esempio https://developer.mozilla.org/en/tra...dom_interfaces

[albx87]

Wow...grazie mille bstefano79....molto interessante...