[JAVASCRIPT] - Recuperare dati da tabella tramite DOM

Re_Kotc · 27-11-2009, 11:24

ciao a tutti, ho una tabella standard con alcune colonne e a fianco di ogni riga un bottone per la modifica, al click del bottone dovrei poter recuperare i dati dei campi dalla riga scelta per poi elaborarli.

Ora con i metodi DOM sono in grado di accedere ai campi, ma come posso fare il tutto automaticamente? Cioè vorrei che al click la funzione js prenda i valori dei campi della riga che ho scelto di modificare ..

Spero di essermi spiegato

grazie mille!

wingman87 · 27-11-2009, 12:28

Se il pulsante e' in una cella nella stessa riga delle celle contententi i campi a cui devi accedere basterebbe prendere tutti i fratelli della cella contenente il pulsante e prendere i loro contenuti.

EDIT: aggiungo delle note su una possibile implementazione: dato un pulsante acquisisci il padre (la cella che lo contiene) con parentNode e da questo ottieni i vari fratelli (posto che siano le celle a sinistra del pulsante) con previousSibling.

Re_Kotc · 27-11-2009, 13:03

grazie mille! piano piano inizio a ricordarmi i metodi del DOM

...

Re_Kotc · 30-11-2009, 09:31

Codice PHP:


			
<tr id="5">

    <td onclick="funzione.js"><b>td1</b></td>

    <td onclick="funzione.js"><b>td2</b></td>

 </tr>

<tr id="6">

    <td onclick="funzione.js"><b>td1</b></td>

    <td onclick="funzione.js"><b>td2</b></td>

 </tr>

Dovrei poter fare in modo che al click sulla cella venga richiamata la funzione.js assieme al parametro contenente l'id corrispondente al tr in cui ho premuto il bottone....ma non riesco a farlo!...help...grazie

wingman87 · 30-11-2009, 19:10

Ti ho scritto un semplice esempio per fare quello che chiedevi. Più che altro è per darti un'idea, ad esempio sarebbe molto meglio ciclare i fratelli invece di recuperarli uno ad uno come ho fatto qui

Codice PHP:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title>Prova</title>

        <script type="text/javascript">

            function prova(btn){

                btnCell=btn.parentNode;

                value2=btnCell.previousSibling.innerHTML;

                value1=btnCell.previousSibling.previousSibling.innerHTML;

                alert(value1 + " " + value2);

            }

        </script>

    </head>

<body>

    <table>

      <tr><td>1</td><td>2</td><td><input type="button" onclick="prova(this)" /></td></tr>

    <tr><td>2</td><td>3</td><td><input type="button" onclick="prova(this)" /></td></tr>

      <tr><td>3</td><td>4</td><td><input type="button" onclick="prova(this)" /></td></tr>

      <tr><td>4</td><td>5</td><td><input type="button" onclick="prova(this)" /></td></tr>

    </table>

</body>

</html>

27-11-2009, 11:24	#1
Re_Kotc Senior Member Iscritto dal: Aug 2003 Città: verona Messaggi: 541	[JAVASCRIPT] - Recuperare dati da tabella tramite DOM ciao a tutti, ho una tabella standard con alcune colonne e a fianco di ogni riga un bottone per la modifica, al click del bottone dovrei poter recuperare i dati dei campi dalla riga scelta per poi elaborarli. Ora con i metodi DOM sono in grado di accedere ai campi, ma come posso fare il tutto automaticamente? Cioè vorrei che al click la funzione js prenda i valori dei campi della riga che ho scelto di modificare .. Spero di essermi spiegato grazie mille! __________________ CASE: Cooler Master Stacker 831 Silver MOBO: Asus Maximus Formula CPU: Intel Q6600@2,4ghz RAM: 2x 1GB Corsair XMS2 pc2-8500@1066mhz + 2x2GB Corsair XMS2 pc2-8500@1066mhzVGA: ATI Sapphire RADEON 5830 1GB GDDR5 HD: 2 x WD Caviar SE16 500GB Raid 0

27-11-2009, 12:28	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2794	Se il pulsante e' in una cella nella stessa riga delle celle contententi i campi a cui devi accedere basterebbe prendere tutti i fratelli della cella contenente il pulsante e prendere i loro contenuti. EDIT: aggiungo delle note su una possibile implementazione: dato un pulsante acquisisci il padre (la cella che lo contiene) con parentNode e da questo ottieni i vari fratelli (posto che siano le celle a sinistra del pulsante) con previousSibling. Ultima modifica di wingman87 : 27-11-2009 alle 12:41.

27-11-2009, 13:03	#3
Re_Kotc Senior Member Iscritto dal: Aug 2003 Città: verona Messaggi: 541	grazie mille! piano piano inizio a ricordarmi i metodi del DOM ... __________________ CASE: Cooler Master Stacker 831 Silver MOBO: Asus Maximus Formula CPU: Intel Q6600@2,4ghz RAM: 2x 1GB Corsair XMS2 pc2-8500@1066mhz + 2x2GB Corsair XMS2 pc2-8500@1066mhzVGA: ATI Sapphire RADEON 5830 1GB GDDR5 HD: 2 x WD Caviar SE16 500GB Raid 0

30-11-2009, 09:31	#4
Re_Kotc Senior Member Iscritto dal: Aug 2003 Città: verona Messaggi: 541	Codice PHP: `<tr id="5"> <td onclick="funzione.js"><b>td1</b></td> <td onclick="funzione.js"><b>td2</b></td> </tr> <tr id="6"> <td onclick="funzione.js"><b>td1</b></td> <td onclick="funzione.js"><b>td2</b></td> </tr>` Dovrei poter fare in modo che al click sulla cella venga richiamata la funzione.js assieme al parametro contenente l'id corrispondente al tr in cui ho premuto il bottone....ma non riesco a farlo!...help...grazie __________________ CASE: Cooler Master Stacker 831 Silver MOBO: Asus Maximus Formula CPU: Intel Q6600@2,4ghz RAM: 2x 1GB Corsair XMS2 pc2-8500@1066mhz + 2x2GB Corsair XMS2 pc2-8500@1066mhzVGA: ATI Sapphire RADEON 5830 1GB GDDR5 HD: 2 x WD Caviar SE16 500GB Raid 0

30-11-2009, 19:10	#5
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2794	Ti ho scritto un semplice esempio per fare quello che chiedevi. Più che altro è per darti un'idea, ad esempio sarebbe molto meglio ciclare i fratelli invece di recuperarli uno ad uno come ho fatto qui Codice PHP: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Prova</title> <script type="text/javascript"> function prova(btn){ btnCell=btn.parentNode; value2=btnCell.previousSibling.innerHTML; value1=btnCell.previousSibling.previousSibling.innerHTML; alert(value1 + " " + value2); } </script> </head> <body> <table> <tr><td>1</td><td>2</td><td><input type="button" onclick="prova(this)" /></td></tr> <tr><td>2</td><td>3</td><td><input type="button" onclick="prova(this)" /></td></tr> <tr><td>3</td><td>4</td><td><input type="button" onclick="prova(this)" /></td></tr> <tr><td>4</td><td>5</td><td><input type="button" onclick="prova(this)" /></td></tr> </table> </body> </html>

Strumenti
Mostra una versione stampabile Invia questa pagina per email