Script Javascript che aggiunge righe dinamicamente in una tabella.

[alberigo]

Ciao a tutti.
Ho manipolato uno script trovato nel web per generare dinamicamente delle righe in una tabella e avrei bisogno di un suggerimento su come aggiungere un paio di funzionalità.

var num=1;
function accoda(){
    if(document.createElement && document.getElementById && document.getElementsByTagName) {
        // crea elementi
        var oTr=document.createElement("TR");
        var oTd1=document.createElement("TD");    //colonna combo articolo
        var oTd2=document.createElement("TD");    //colonna descrizione
    var oTd3=document.createElement("TD");    //colonna quantità
    var oTd4=document.createElement("TD");    //colonna U.M.
    var oTd5=document.createElement("TD");    //colonna prezzo unitario
    var oTd6=document.createElement("TD");    //colonna pulsante rimuovi
        
        var oField1=document.createElement("SELECT");
    var oField2=document.createElement("INPUT");
    var oField3=document.createElement("INPUT");
    var oField4=document.createElement("INPUT");
    var oField5=document.createElement("INPUT");
        var oButt=document.createElement("INPUT");


        // setta attributi
        oField1.setAttribute("name","select"+num);
    //---------------------------------------------
    oField2.setAttribute("type","text");
        oField2.setAttribute("name","descrizione"+num);
    oField2.setAttribute("size","57");
    //---------------------------------------------
        oField3.setAttribute("type","text");
        oField3.setAttribute("name","qty"+num);
    oField3.setAttribute("size","7");
    //---------------------------------------------
        oField4.setAttribute("type","text");
        oField4.setAttribute("name","um"+num);
    oField4.setAttribute("size","4");
    //---------------------------------------------
        oField5.setAttribute("type","text");
        oField5.setAttribute("name","prezzo"+num);
    oField5.setAttribute("size","13");
    //---------------------------------------------
        oButt.setAttribute("type","button");
        oButt.setAttribute("value","Rimuovi");


        // setta gestore evento
        if(oButt.attachEvent) oButt.attachEvent('onclick',function(e){rimuovi(e);})
        else if(oButt.addEventListener) oButt.addEventListener('click',function(e){rimuovi(e);},false)


        // appendi al relativo padre
        oTd1.appendChild(oField1);
    oTd2.appendChild(oField2);
    oTd3.appendChild(oField3);
    oTd4.appendChild(oField4);
    oTd5.appendChild(oField5);
        oTd6.appendChild(oButt);
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
    oTr.appendChild(oTd3);
    oTr.appendChild(oTd4);
    oTr.appendChild(oTd5);
    oTr.appendChild(oTd6);
        document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);


        // incrementa variabile globale
        num++
    }
}

Prima funzionalità:
ho notato che la combo della seconda riga della tabella (num = 2) perde ogni caratteristica della combo della prima riga (num = 1), dia eventuali option value che inserisco che eventi su onchange. La domanda è: come faccio a portare sulle successive combo le stesse funzionalità della prima?

Seconda funzionalità:
ogni riga dovrà essere un record di un database mysql. La variabile num sarà quella che determinerà il numero di record che dovranno essere inseriti nella tabella del database. Uno script di questo tipo potrebbe andare bene?

// branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        check= new XMLHttpRequest();
        check.open("GET", "form/pagina.php?n_record="+num, true);
        check.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        check= new ActiveXObject("Microsoft.XMLHTTP");
        if (check) {
        check.open("GET", "form/pagina.php?n_record="+num, true);
            check.send();
        }
    }

Grazie per ogni tipo di aiuto.

[peppescg]

ciao potresti postare anche il codice html così mi copio tutto e faccio debug?

[alberigo]

.......
<table id="tabella" width="735" border="0" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td width="50"><select name="select0" id="select0" onchange="selezione_articolo();"></select></td>
            <td width="403"><div align="center"><input name="descrizione0" type="text" id="descrizione0" size="57" /></div></td>
            <td width="54"><div align="center"><input name="qty0" type="text" id="qty0" size="7" /></div></td>
            <td width="33"><div align="center"><input name="um0" type="text" id="um0" size="4" /></div></td>
            <td width="93"><div align="center"><input name="prezzo0" type="text" id="prezzo0" size="13" /></div></td>
            <td width="66"><input type="button" disabled="disabled" value="Rimuovi" /></td>
        </tr>
     </tbody>
</table>
.......

Immagino serva solo il codice della tabella...

Grazie

[peppescg]

mi potresti descrivere cosa dovresti fare ? quando la funziona deve inserire una nuova riga? perché accoda non parte ne su onclick ne su un altro evento.
L'html è del tutto scollegato col js, per aggiungere tr su una table non hai bisogno di scriver tutto quel codice..
spiegami cosa devi fare esattamente..
grazie

[alberigo]

Scusami ma mi sono dimenticato una riga di codice che si trova esattamente sotto il tag di chiusura della tabella.

<input type="button" value="Aggiungi voce" onclick="accoda()" />

ed è proprio il legame tra l'html e il javascript.
Premendo quel bottone aggiungo una nuova riga alla tabella.

Le righe che voglio inserire sono le voci di una fattura.
La combo mi serve nel caso volessi selezionare un articolo presente a magazzino.

[peppescg]

quindi seleziono nella combo un articolo e cosa dovrebbe accadere? all'interno della select tu non metti nessuna option, non crei nessuna option da 'appendere' alla select.
devi inserire dinamicamente le option nelle select...
la logica è questa:
crei selects, crei options e le appendi alla select, devi dare un id alle select create e valori alle options...sull'onchange delle options fai una funzione che stampi a video una tabella formattata in una certa maniera, oppure riscrivi le colonne a fianco.

io al posto tuo farei una struttura diversa, tipo ricerca avanzata, con options del tipo fattura 1, fattura 2 ecc sotto una tabella con il record di tutte le tabelle, all'onchange delle options selezioni quella che ti interessa e fai quello che devi fare

[alberigo]

All'interno della combo non ho messo niente perché qualsiasi cosa metta (siano option che evento), inserendo un'altra riga la combo della riga aggiunta perde sia gli option che l'evento di quella della riga precedente. Option ed eventi restano solo sulla combo della prima riga.

La combo avrà un evento sull'onchange che cercherà dei valori in una tabella ma questo lo so fare.

Il mio problema non è inserire option ed eventi nella combo ma capire perché nelle righe successive alla prima le combo perdono sia gli option che gli eventi.

[cavicchiandrea]

Perché non li metti

[peppescg]

esempio

<td width="50">
<select name="select0" id="select0" onchange="selezione_articolo();">
<option value="1">option 1</option>
</select>
</td>

js

 var oField1=document.createElement("SELECT");

//inserimento option 
        var opt = document.createElement("OPTION");
        var opt2 = document.createElement("OPTION");
            opt.text = "option1";
            opt.value = num;
            opt2.text = "option2";
            opt2.value = num;
            oField1.appendChild(opt);
            oField1.appendChild(opt2);

Devi inserire i parametri text e value altrimenti non prende nulla

[alberigo]

Perdonami ma, essendo autodidatta, alcune cose che dovrebbero essere scontate per me non lo sono affatto.

Ecco, il dover creare gli option per la combo non lo avevo considerato. Io li inserivo all'interno del tag select pensando che che tutto ciò che riguardava la combo sarebbe stato passato da una riga all'altra.
Come facevo io quindi non passava gli option e quindi non generava neanche l'evento onchange.....

E se io gli option dovessi ricavarli dinamicamente da una tabella di un database? Io ho in mente una procedura fatta di XMLHttpRequest e di array lato server ma è la via giusta?

Ad ogni modo grazie peppescg, tu sì che mi sei stato di aiuto.