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
Usare lo spread operator con i collection initializer in C#
Effettuare delete massive con Entity Framework Core 7
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare Tailwind CSS all'interno di React: installazione
Sfruttare al massimo i topic space di Event Grid MQTT
.NET Conference Italia 2023
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Load test di ASP.NET Core con k6
Cambiare la chiave di partizionamento di Azure Cosmos DB
Eseguire attività basate su eventi con Azure Container Jobs
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Supportare il sorting di dati tabellari in Blazor con QuickGrid
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Paginare i risultati con QuickGrid in Blazor