Molto spesso quando dobbiamo mostrare i dati in una tabella, l'ultima colonna della tabella contiene dei link che eseguono operazioni come la cancellazione o l'apertura di un popup con il dettaglio dell'elemento selezionato. In questi casi una delle tecniche spesso usate è quella di impostare una funzione JavaScript nell'attributo href del link impostando come parametro della funzione l'id dell'elemento della riga.
Questa tecnica va benissimo, ma presenta l'inconveniente di legare la generazione dell'HTML e la gestione degli eventi lato JavaScript. Per ovviare a questo problema, per ogni tag a possiamo generare un attributo data-id all'interno del quale impostiamo l'id della riga a cui il tag a appartiene.
Successivamente, lato JavaScript ci sottoscriviamo al click di tutti i tag a della tabella recuperando l'id tramite l'attributo data-id. Nel seguente codice possiamo vedere un esempio di questa tecnica.
<table> <tr> <td><a href="javascript:;" data-id="1">Edit</a></td> </tr> <tr> <td><a href="javascript:;" data-id="2">Edit</a></td> </tr> </table>
$(function(){ $("table a").click(function(ev){ alert($(ev.target).attr("data-id")); }); });
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Usare lo spread operator con i collection initializer in C#
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare database e servizi con gli add-on di Container App
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Usare le collection expression per inizializzare una lista di oggetti in C#
Assegnare un valore di default a un parametro di una lambda in C#
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Gestire undefined e partial nelle reactive forms di Angular
Sfruttare al massimo i topic space di Event Grid MQTT