onclick = input text

[stakanovista]

Salve ho bisogno del vostro aiuto.
In pratica ho un file.js dove sono implementate delle funzioni di disegna tabella, prendendo con PHP un file.txt inserisco i valori in un array che passo a javascript e li inserisce in una tabella.
Il mio problema è creare una funzione modifica in cui all'onclick su di una cella, mi appare un campo <input type="text"..../>

vi posto il codice per essere più chiaro:

function GestioneTabella()
{
    this.array=new Array()
    this.array_modifiche = new Array()
    
    this.posiziona = posiziona
    this.disegna = disegna
    this.controlla_array = controlla_array
    
    this.modifica = modifica
    
    this.crea_form = crea_form
    
}

    //realizza la struttura della tabella e richiama posiziona per ogni riga
    function disegna(box,path)
    {
        st ="<table border=1>";
        st+="<tr><td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(0);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(0);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(1);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(1);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(2);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(2);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(3);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(3);\"></button></td></tr>";
        st+="<tr><td colspan=2><span>Nome</span></td><td colspan=2><span>Codice</span></td><td colspan=2><span>Valore</span></td><td colspan=2><span>Validit&agrave;</span></td></tr>";
        for (var y in this.array)
            st+="<tr id=\""+y+"\"></tr>";
        st+="</table>";
        document.getElementById(box).innerHTML=st;
        for (var y in this.array)
            this.posiziona(y);
        
        //inserisco i pulsati di salvataggio
        st="
<input type=button id='salva' value='salva' onclick='miaTabella.crea_form(\""+path+"\");'/>";
        st+="<input type=button id='cancella' value='annulla' onclick=\"miaTabella.array_modifiche=new Array();  miaTabella.disegna('"+box+"','"+path+"');\" /> ";
        document.getElementById(box).innerHTML+=st;

    }
    //questa funzione riceve la riga dell'array da controllare.
    //verifica se l'array contiene informazioni corrette e realizza i td che dovranno essere visualizzati nella tabella
    //inserendoli nell'apposito tr con id=indice
    function posiziona(indice)
    {
        aux="";
        if (this.array_modifiche[indice]!=undefined)
            aux = this.array_modifiche[indice].split(":"); 
        else if (this.array[indice]!=undefined)
            aux = this.array[indice].split(":");
        st="";
        if (this.controlla_array(aux))
            for (var y in aux)
            {
                st+="<td colspan=2 id=\""+indice+"_"+y+"\" onclick=\"miaTabella.modifica(this.id); \">"+aux[y]+"</td>";
            }
        else
            {
                st="<td colspan=4 class=\"linea_errata\" id=\""+indice+"_4\" onclick=\"miaTabella.modifica(this.id);\">"+aux.join(":")+"</td>";
            }
        document.getElementById(indice).innerHTML = st;
    } 

come faccio ad implementare questa funzione? ad ogni <td> passo la funzione modifica(this.id), come la gestisco poi su modifica()??

Grazie

[stakanovista]

da qui richiamo l'onclick:

st+="<td colspan=2 id=\""+indice+"_"+y+"\" onclick=\"miaTabella.modifica(indice,this.id,this.value); \">"+aux[y]+"</td>"; 

qui eseguo la funzione modifica:

st+="<td colspan=2 id=\""+indice+"_"+id+"\"><imput type=\"text\" />"+valore+"</td>";
        document.getElementById(indice).innertHTML = st; 

Dove sbaglio?

[deleted_110]

vedo un imput al posto di input

non so se e' solo quello

[stakanovista]

Avevi visto bene, ma non è quello l'errore...

[deleted_110]

puoi postare tutta la funzione "modifica"?

e magari una parte di HTML che contenga un TD

o meglio ancora un link alla pagina?

[stakanovista]

Questa è la funzione disegna() che disegna la tabella:

function disegna(box,path)
    {
        st ="<table border=1>";
        st+="<tr><td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(0);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(0);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(1);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(1);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(2);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(2);\"></button></td>"+
                "<td><button value=\"cre\" id=\"crescente\" onclick=\"crescente(3);\"></button></td><td><button value=\"dec\" id=\"decrescente\" onclick=\"decrescente(3);\"></button></td></tr>";
        st+="<tr><td colspan=2><span>Nome</span></td><td colspan=2><span>Codice</span></td><td colspan=2><span>Valore</span></td><td colspan=2><span>Validit&agrave;</span></td></tr>";
        for (var y in this.array)
            st+="<tr id=\""+y+"\"></tr>";
        st+="</table>";
        document.getElementById(box).innerHTML=st;
        for (var y in this.array)
            this.posiziona(y);
        
        //inserisco i pulsati di salvataggio
        st="
<input type=button id='salva' value='salva' onclick='miaTabella.crea_form(\""+path+"\");'/>";
        st+="<input type=button id='cancella' value='annulla' onclick=\"miaTabella.array_modifiche=new Array();  miaTabella.disegna('"+box+"','"+path+"');\" /> ";
        document.getElementById(box).innerHTML+=st;

    }
    

    function posiziona(indice)
    {
        aux="";
        if (this.array_modifiche[indice]!=undefined)
            aux = this.array_modifiche[indice].split(":"); 
        else if (this.array[indice]!=undefined)
            aux = this.array[indice].split(":");
        st="";
        if (this.controlla_array(aux))
            for (var y in aux)
            {
                st+="<td colspan=2 id=\""+indice+"_"+y+"\" onclick=\"miaTabella.modifica(indice,this.id,this.value); \">"+aux[y]+"</td>";
            }
        else
            {
                return false;
            }
        document.getElementById(indice).innerHTML = st;
    } 

la funzione disegna() inserisci i tag <table> e <tr> mentre posiziona(), inserisce i tag <td> con l'evento onclik, di seguito la funzione modifica():

function modifica(indice,id,valore)
    {
        st+="<td colspan=2 id=\""+indice+"_"+id+"\"><input type=\"text\" />"+valore+"</td>";
        document.getElementById(indice).innertHTML = st;
    } 

[deleted_110]

 st+="<td colspan=2 id=\""+indice+"_"+y+"\" onclick=\"miaTabella.modifica(indice,this.id,this.value); \">"+aux[y]+"</td>";

il tag TD non ha un attributo value, che io sappia.

dovresti ricevere un errore sul click.

Cosa dice la console javascript?

[stakanovista]

dice che "l'indice non è definito"...

Comunque hai ragione, però il value dovrebbe essere il valore dell'array aux[y], come lo passo??

[deleted_110]

st+="<td colspan=2 id=\""+indice+"_"+y+"\" onclick=\"miaTabella.modifica(indice,this.id,"+aux[y]+"); \">"+aux[y]+"</td>";

semplicemente

[stakanovista]

grazie e come lo richiamo nella funzione modifica??
cioè come faccio all'onclick a farmi spuntare il campo di input con il valore uguale a value??