Trovare i valori delle celle in una tabella con Javascript

Partendo da un esempio di tabella reale, nel senso che la uso in un programma in azienda, vediamo come, attraverso Javscript, possiamo identificare i valori delle celle della riga selezionata.

Questa è la teballa HTML (riempita tramite PHP, ma cambia poco):

<table id="tbl_and">
    <thead>
        <tr>
            <th>AGENTE</th>
            <th>RAG.SOC.</th>
            <th>BUDGET</th>
            <th>ORDINE</th>
            <th>COLLEZIONE</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($array as $var): ?>
            <tr>
                <td><?php echo $var['and_utente']; ?></td>
                <td><?php echo $var['and_ragsoc']; ?></td>
                <td><?php echo $var['and_budget']; ?></td>
                <td><?php echo $var['and_ordine']; ?></td>
                <td><?php echo $var['and_collezione']; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

La funzione che andremo a vedere caricherà tutte le righe della tabella, e si occuperà di intercettare l'evento click sulla riga.

Vediamo la funzione:

function formAndamento() {
    Array.prototype.forEach.call(document.querySelectorAll("#tbl_and tbody tr"), function (tr) {
        tr.addEventListener("click", function () {
            var valori = [];
            Array.prototype.forEach.call(this.children, function (td) {
                valori[valori.length] = td.innerHTML;
            });
            console.log(valori[0] + " - " + valori[1]);
        });
    });
}

La funzione forEach, esegue una funzione per ogni elemento che incontra.

In questo caso gli elementi sono le righe della tabella che identifichiamo con call e querySelectorAll.

La funzione call, infatti, è un metodo che richiama un'altra funzione.

Sotto riempiamo un array e poi lo visualiziamo.

I valori visualizzati saranno saranno solo della riga selezionata!

Infatti ogni riga della tabella viene trattata a sua volta come un array, composto dalle celle.

I valori dell'array che visualiziamo sono quelli corrispondenti alle cella della riga selezionata.

Quindi il flusso è questo:

• in caricamento di pagina viene impostato un listener su ogni riga
• al click sulla riga si identificano le celle e si riempie un array
• si visualizzano i valori dell'array

Enjoy!