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
Verificare la provenienza di un commit tramite le GitHub Actions
Utilizzare i primary constructor in C#
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Paginare i risultati con QuickGrid in Blazor
Utilizzare Tailwind CSS all'interno di React: installazione
Hosting di componenti WebAssembly in un'applicazione Blazor static
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Potenziare Azure AI Search con la ricerca vettoriale
Creazione di componenti personalizzati in React.js con Tailwind CSS
Eseguire una query su SQL Azure tramite un workflow di GitHub
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes