Riga tabella html

di il
9 risposte

Riga tabella html

Ciao a tutti,
stò lavorando sulle tabelle html.
genero via javascript una tabella che contiene nelle prime colonne delle informazioni, nelle ultime 2 invece dei bottoni del tipo Download e Modifica per ogni riga (tipo allegato).
vorrei sapere come posso fare a determinre la riga quando premo Download o Modifica.

grazie a tutti in anticipo!
Allegati:
7813_1d1d0d1011dc856b4e1c8f451ce39da7.png
7813_1d1d0d1011dc856b4e1c8f451ce39da7.png

9 Risposte

  • Re: Riga tabella html

    Ciao elle0087,
    quando generi la tabella puoi generare gli onclick dei vari bottoni in modo tale che passino alla funzione chiamata l' indice delle riga.
  • Re: Riga tabella html

    Ciao,
    grazie per la riposta.!
    pubblico la soluzione nel caso possa server ad altri...
    
    var row = document.getElementById(tableID).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    
    row[i].onclick = function()
                            {
                              var cell = this.getElementsByTagName("td")[0];
                              var id = cell.innerHTML;
                              alert("id:" + id);
                              
                          };
    
  • Re: Riga tabella html

    Ciao,
    il codice prima postato faceva parte di un ciclo, per cui
     row[i].onclick
    è una determinata riga alla posizione i.

    una cosa, poi però, come faccio nella pagina html a catturare il valore dopo l evento?
  • Re: Riga tabella html

    Ciao,
    in pratica quello che non riesco a fare è questo...

    
    function addCol(tableID,data,type,value,position,offsetPos)
    {
        var array=StringToArray(data);
        var table = document.getElementById(tableID);
        var id;
    
        for(j=array.length-1;j>=0;j--)
        {
    
            for(i=0+offsetPos;i<table.rows.length;i++)
            {
                var row = document.getElementById(tableID).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    
                var cell1 = row[i].insertCell(position);
                element2.type = type;
                element2.value=array[j];
                element2.name=i;
                element2.id=array[j];
                cell1.appendChild(element2);
                
                //questo associa l evento all elemento 'input' di quella riga
    
                var cell=row[i].getElementsByTagName('input');
                cell[0].onclick = function()
                                 {
                                     var td=this.id;
                      
                                     //come faccio a ritornare questo valore nell pagina HTML che 
                                     //chiama questo JS???? 
                                     
                                     //qua stampo a video il bottone cliccato e la sua riga...
    
                                     alert("id2: "+this.id+' '+this.name);
                                 
                                 };
                    
            }
        }
        
    }
    
    
    una volta creato l evento 'onclick' non sò come ritornarlo nella pagina HTML che ha chiamato il JS.

    grazie a tutti.!!.
  • Re: Riga tabella html

    Non ho ben capito esattamente il funzionamento del tasto download, intanto immagino che la funzione StingToArray() sia creata da te, e potresti risparmiare risorse utilizzando la funzione degli string facendo data.split( "-" ); il trattino puo essere sostituito da stringa o espressione regolare e restituisce una array di string come immagino tu abbia bisogno.
    poi nella prima riga del secondo for puoi sostituire il document.getElementById() con semplicemente table che e' la variabile che hai gia iniziallizato per risparmiare tempo, e come ulteriore suggerimento , potresti portare tutto tutto fuori dei cicli for dal momento che in questa funzione table non viene mai usata, e avresti la lista di righe inizializzata una volta per tutte.
    poi ho visto che element2 non e' stato dichiarato esplicitamente e viene immediatamente usato e dai valori che hai usato per settarlo immagino che si tratti di un di un elemento input in modo che possa essere editabile quando si clicca sul pulsante modifica. anzi continuando a leggere si vede proprio dal richiamo della variabile che element2 e' proprio un input.
    Pero' da qui mi sorge un dubbio sul fatto che ogni campo di input riceve un id settato attraverso array[j] e quindi piu' cello avranno stesso id in caso di omonimia per cognome o per nome, e tantissimi id identici per sesso e anche qualcuna per data di nascita. dal momento che id e' essattamente identico a value potresti eliminare l'asegnazione del'attributo id e nella funzione onclick richiamare direttamente this.value;
    venendo nella parte cruciale non ho ben capito cosa intendi per ritornare il valore nella pagina HTML che chiamo la js, ogni modifica che js modifica un elemento dell'html questo e modificato immediatamente di conseguenza non c'e neccessita' di un passaggio ulteriore, ne e' la prova la visualizzazione della tua tabella che immagino sia a righe vuote prima di essere popolato dallo script.
    
    function addCol(tableID,data,type,value,position,offsetPos)
    {
        var array=data.split('-'); // magari lo modifichi opportunamente per i tuoi dati, se invece usi un sistema piu complesso ti conviene continuare con la tua funzione
    	// eventualmente asegni un id direttamente a tbody se non ti stravolge ecessivamente il resto dello script
    	var row = document.getElementById(tableID).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        var id;
    
        for(j=array.length-1;j>=0;j--)
        {
    
            for(i=0+offsetPos;i<table.rows.length;i++)
            {
    
                var cell1 = row[i].insertCell(position);
                // immagino che element2 sia gia dichiarato da qualche parte altrimenti
    			// var element2 = document.createElement('input');
    			element2.type = type; 
                element2.value=array[j];
                element2.name=i;
    			// elimino la riga di asegnazione all'attributo id per evitare piu id con lo stesso valore che e' illegale ma eventualmente
                //element2.id=array[j] + '-' + i; in questo modo avrai idi univoci a meno che non incontri un qualchuno che ha il nome e cognome identico
                cell1.appendChild(element2);
                
                //questo associa l evento all elemento 'input' di quella riga
    
                var cell=row[i].getElementsByTagName('input');
                // cell[0].onclick = function()
                                 // {
                                     // var td=this.id;
                      
                                     // come faccio a ritornare questo valore nell pagina HTML che 
                                     // chiama questo JS???? 
                                     
                                     // qua stampo a video il bottone cliccato e la sua riga...
    
                                     // alert("id2: "+this.id+' '+this.name);
                                 
                                 // };
                // ora di questa parte non sono molto pratico in quanto sono agli inizi con gli eventi
    			cell[0].onclick = function(evento) {
    				var td = evento.target.value; // e' piu consigliabile usare target o currentTarget dell'oggetto event per creare meno confusione, delle volte this non punta a quello che si vorrebbe
    					// non reisco a capire cosa intendi come ritornare questo valore se vuoi semplicemente visualizzarlo in quelche punto o cos'altro
    					// tutti i valori sono gia passati alla pagine nel browser nel momento in cui hai fatto appendChild(element2) quindi richiamabile allo stesso modo da questo script.
    				alert('id2: '+this.id+' '+this.name);
    			}
            }
        }
        
    }
    
    ho provato a renderlo piu pulito.
    Come punto finale con condivido il modo in cui popoli la tabella facendolo a colonna, personalmente sono abituato a farlo per riga, ma questo poco cambia alla macchina, per se dovesse succedere che salta un campo non avresti piu i dati coerenti e tutte le informazione successiva viene traslato seguendo l'errore. E ricontrollando bene credo che hai sbagliato qualcosa nella logica delle for annidate, e immagino che questa funzione sia richiamata anch'esso all'interno di un altro ciclo che cicla le colonne e quindi praticamente sarebbero 3 cicli for annidati( piu' cicli annidati hai e piu' e' difficle il controllo ) a una prima analisi senza esecuzione credo che la tua tabella abbia tutte le celle delle colonne con lo stesso valore.
  • Re: Riga tabella html

    Riusciresti a descrivere come vengono forniti i dati? e' molto importante la regola di formattazione,
    se sono singoli file per ogni riga di tabella, o una unica con qualche regola che distingue le righe e poi divide le varie celle. esempio:
    nome, cognome, CF, nascita, etc...; nome, cognome, CF, etc...;
    in questo esempio uso i puntoevirgola per delimitare le righe e , per celle/colonne
    per quanto riguarda il problema che citavo sopra sulle for annidate secondo me ti basta un unico ciclo con doppio variabile anche se non capisco il motivo del decrementale del j(come mai questa scelta?)
    ti basterebbe una scrittura del for in questo modo
    for( i = 0 + offsetPos, j=array.length-1; j>=0&&i<raw.length; i++, j--) { corpo for }
    ma anche in questo modo mi da poco senso
    in teoria io immaginerei che l'array ricavato da data sia distribuito sequenzialmente uno a uno sulle celle della colonna corrente, se cosi dovesse essere sarebbe
    for( i = 0, i<row.length&&i<array.length; i++ ) { .... element2.value = array[1];
    in questo modo si ottiene un abinamento

    array coll

    array[0] row[0]
    array[1] row[1]
    array[2] row[2]
    .... e cosi via, quindi con capisco il motivo e lo strano modo di popolare le colonne che hai usato, che per capire l'output dovrei eseguirlo o fare una trace completa con anche il codice chiamante.
  • Re: Riga tabella html

    Ciao,
    intanto grazie per l interessamento e i consigli...
    ma il mio problema non stà nella creazione delle tabella e/o definizione degli elementi, ma di come recuperare il valore della riga cliccata nella pagina HTML.
    in pratica, quando clicco, in base alla riga selezionata, devo chiamare la servlet e passargli questo valore per effettuare una query nel db.
    vorrei evitare di scrivere la chiamata nel js.
    è un po più chiaro?

    grazie ancora!
  • Re: Riga tabella html

    Non proprio, conosco solo javascript per ora come linguaggio web e non ho nessuna nozione su eventuali altri sistemi. Pero' se non ricordo male alcune query possono essere fatte anche semplicemente come link del browser, io lo usavo per recuperare la truttura dati della risposta di flickr, youtube, per avere una buona idea della struttura e riuscire a muovermi con l'aiuto di jQuery nel caso di xml, e semplicemente per vedere la strutturo dell'oggetto json. cosa dovrebbe fare il pulsante download effettivamente? scaricare un file? o semplicemente scaricare un piccolo resoconto della riga sul pc?
    In ogni caso come detto prima tutte le modifice sono gia effettive nel dom, quindi un qualunque linguaggio che puo interagire con il dom puo accedere ai suoi dati, come fa il browser, che poi alla fine il dom e' una forma di rappresentazione ad oggetti del documento HTML.
    Pero'' se quello che ti serve e' scaricare un file diverso da .html basterebbe avere un <a> con href impostato al file che vuoi venga scaricato, naturalmente mascheri il link come se fosse un pulsante con opportuni effetti rollover per simulare il click, o semplicemente appendere al tag <button> un link <a> con il riferimento opportuno, ho fatto un paio di prove e purtroppo non tutti file sono scaricati e se hai bisogno di scaricare quelli che il browser apre ho trovato questa guida per incorporare un file php che risolve il problema.
    "http://www.betacontrasto.com/come-forzare-il-browser-al-download-di-un-file/"
    intanto come esempio posso supporre che a tabella riempita tu acceda a questo file attraverso nome cognome magari piu' codice fiscale per costruire un il nome del file.
    mario-rossi-CF.txt
    
    //dentro il tuo for dovresti impostare una condizione del genere
    switch(position) // se non ricordo male la position e' la colonna
    {
     case 1: download.href += 'percorso dove si trova il tuo file' + array[i]; 
     case 2: download.href += array[i];
     case 3: download.href += array[i] + '.txt';
    }
    
    download deve essere un riferimento al link dentro al button per effettuare il download
    in questo modo setti il riferimento, e download deve essere opportunamente settata sulla riga corrente altrimenti fai una lista dei download unica e poi accedi con download.
    Un'altra cosa che puo fare per lo stoccagio dei dati con dom e javascript e' devinire delle variabile negli elementi, per esempio
    se tu fai table = document.getElementById('miaTabella');
    table.dati = new Array();
    table.dati[0] = "mario"; table.dati[1] = "carla";
    avrai un oggetto del genere
    table{ dati[ "mario", "carla" ] }
    e naturalmente puoi aggiungere quanti variabili vuoi ma non sono utili al rendering html, che poi pensandoci alla fine il codice html serve quasi esclusivamente alla formattazione per semplificare il rendering grafico, non fa altro per questo non riesco a capire cosa intendi per recuperare il dato attraverso il codice html, da quel che mi risulta html e xml sono linguaggi dedicati alla formattazione e non ad altro, correggetemi se sbaglio.
  • Re: Riga tabella html

    Ciao,
    il mio problema era dove mettere la submit.
    volevo, se possibile inserirla nella pagina html per avere tutto li, per comodità..
    cmq ho risolto così.
    
    cell[0].onclick = function()
    {
        document.getElementById('mat').value=document.getElementById(tableID).getElementsByTagNa me('tbody')[0].getElementsByTagName('tr')[this.name].getElementsByTagName('td')[1].innerHTML);
        document.getElementById('prog').value=document.getElementById(tableID).getElementsByTagName('tbody')[0].getElementsByTagName('tr')[this.name].getElementsByTagName('td')[2].innerHTML);
        //effettuo la submit del form 'manage_db_download'
        document.manage_db_download.submit();
    }
    
    dove 'mat' e 'prog' sono due elementi nascosti dischiarati nella pagina html.


    grazie a tutti per l aiuto.!
Devi accedere o registrarti per scrivere nel forum
9 risposte