Prendere valori di tutte le celle di una riga di una tabella

**fermat** · 18-06-2014, 16:18

ciao!

ho una tabella popolata automaticamente da db.
poi ho un form.
quando clicco sulla prima colonna di una riga, dovrei prendere tutti i valori di quella riga e metterli dentro al form.
solo che sinceramente non sono riuscito a capire come prendere i valori delle celle della riga cliccata.
avete qualche suggerimento??
ho provato seguendo questa discussione, ma sennza successo: http://stackoverflow.com/questions/1...-an-html-table

**KillerWorm** · 18-06-2014, 16:33

Ciao, cosa sei riuscito a fare attraverso quella discussione?
Puoi postare un po' di codice? perlomeno la parte della tabella su cui devi intervenire così possiamo vedere assieme come risolvere.
Nel caso, puoi usare jQuery o ti serve necessariamente puro javascript?

**fermat** · 18-06-2014, 16:49

ciao!

non ho messo codice perchè ho copiato esattamente quel codice della discussione.
solo che non esce nulla, quindi secondo me c'è qualcosa che non va:

codice:

function alertInnerHTML(e) {
    e = e || window.event; //IE
    alert(this.innerHTML);
}

function setFormAndamento() {
    var theTbl = document.getElementById('tbl_and');
    for (var i = 0; i < theTbl.length; i++) {
        for (var j = 0; j < theTbl.rows[i].cells.length; j++) {
            theTbl.rows[i].cells[j].onclick = alertInnerHTML;
        }
    }
}

cmq mi va benissimo anche jquery!!

**KillerWorm** · 18-06-2014, 17:15

Ok, chiaramente si può risolvere in vari modi.
Metto da parte quel link e ti posto un esempio jquery fatto al volo ma funzionante.
Non so come sia la tua struttura html riguardo le celle da cui prelevare i dati e gli elementi del form su cui inserirli. Comunque nella funzione ho creato un oggetto "dati" che puoi facilmente personalizzare inserendo delle proprietà che dovranno corrispondere ai relativi id degli elementi input nel form.
Ad ogni modo, se ci sono problemi nell'adattarlo alla tua situazione, chiedi pure.

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      table{
        width: 300px;
        border-collapse: collapse;
      }
      table tr td{
        border: 1px solid Grey;
      }
      table tr:hover{
        color: White;
        background: DarkGreen;
        cursor: pointer;
      }
      label{
        width: 100px;
        display: block;
        float: left;
        text-align: right;
        padding-right: 5px;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#tabella tr").click(function(){
          var celle = $("td",this);
          var dati = {
             id       : celle.eq(0).html()
            ,nome     : celle.eq(1).html()
            ,cognome  : celle.eq(2).html()
          }
          for (var key in dati){
            $("#"+key).val(dati[key]);
          }
        })
      })
    </script>
  </head>
  <body>
    <table id="tabella">
      <tr><td>1</td><td>Pippo</td><td>Baudo</td></tr>
      <tr><td>2</td><td>Topo</td><td>Lino</td></tr>
      <tr><td>3</td><td>Pape</td><td>Rino</td></tr>
      <tr><td>4</td><td>Lozio</td><td>Tom</td></tr>
      <tr><td>5</td><td>Super</td><td>Man</td></tr>
    </table>
    Clicca su una riga per trascrivere i dati sul form
    <form action="#" id="modulo">
      <br><label>ID</label><input id="id" type="text">
      <br><label>Nome</label><input id="nome" type="text">
      <br><label>Cognome</label><input id="cognome" type="text">
    </form>
  </body>
</html>

EDIT:
Ho letto meglio il primo post. Se vuoi limitare il click solo sulla prima cella di ogni riga, allora si può fare in questo modo:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      table{
        width: 300px;
        border-collapse: collapse;
      }
      table tr td{
        border: 1px solid Grey;
      }
      table tr td:first-child:hover,table tr td:first-child:hover ~td{
        color: White;
        background: DarkGreen;
        cursor: pointer;
      }
      label{
        width: 100px;
        display: block;
        float: left;
        text-align: right;
        padding-right: 5px;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#tabella tr td:first-child").click(function(){
          var celle = $(this).siblings();
          var dati = {
             id       : celle.eq(0).html()
            ,nome     : celle.eq(1).html()
            ,cognome  : celle.eq(2).html()
          }
          for (var key in dati){
            $("#"+key).val(dati[key]);
          }
        })
      })
    </script>
  </head>
  <body>
    <table id="tabella">
      <tr><td>copia sul form</td><td>1</td><td>Pippo</td><td>Baudo</td></tr>
      <tr><td>copia sul form</td><td>2</td><td>Topo</td><td>Lino</td></tr>
      <tr><td>copia sul form</td><td>3</td><td>Pape</td><td>Rino</td></tr>
      <tr><td>copia sul form</td><td>4</td><td>Lozio</td><td>Tom</td></tr>
      <tr><td>copia sul form</td><td>5</td><td>Super</td><td>Man</td></tr>
    </table>
    Clicca su una riga per trascrivere i dati sul form
    <form action="#" id="modulo">
      <br><label>ID</label><input id="id" type="text">
      <br><label>Nome</label><input id="nome" type="text">
      <br><label>Cognome</label><input id="cognome" type="text">
    </form>
  </body>
</html>

**tampertools** · 18-06-2014, 17:20

jQuery:

codice:

$("#tuaTabella tr").click(function () {
    var valori = [];
    $(this).find("td").each(function () {
        valori[valori.length] = $(this).html();
    });
    alert(valori);
});

JavaScript puro

codice:

Array.prototype.forEach.call(document.querySelectorAll("#tuaTabella tr"), function (tr) {
    tr.addEventListener("click", function () {
        var valori = [];
        Array.prototype.forEach.call(this.children, function (td) {
            valori[valori.length] = td.innerHTML;
        });
        document.getElementById("campo1").value = valori[0];
        document.getElementById("campo2").value = valori[1];
        document.getElementById("campo3").value = valori[2];
    });
});

Il tuo codice che errori ti da?

Edit Ups, preceduto... lascio per l'esempio senza jquery
Ri-edit Non ho visto che i dati ti servivano in un form...

ho aggiornato il js

**fermat** · 18-06-2014, 20:34

funzionano entrambe le soluzioni!

grazie mille a entrambi!!

Discussione: Prendere valori di tutte le celle di una riga di una tabella

Strumenti discussione

Ricerca discussione

Visualizza

Prendere valori di tutte le celle di una riga di una tabella

Permessi di invio