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
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Eliminare record doppi in Sql Server
Gestione CSS in Blazor con .NET 9
Path addizionali per gli asset in ASP.NET Core MVC
Triggerare una pipeline su un altro repository di Azure DevOps
Implementare il throttle in JavaScript
Selettore CSS :has() e i suoi casi d'uso avanzati
Utilizzare DeepSeek R1 con Azure AI
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Configurare lo startup di applicazioni server e client con .NET Aspire
Ridurre il reflow ottimizzando il CSS
I più letti di oggi
- Community Night@Basta!Italia on tour 2009 - Milano
- Windows Phone 7.1 Mango: ecco i tool in beta
- Speciale Razor: il nuovo view engine di WebMatrix e ASP.NET MVC
- Disponibile l'SDK per Windows Phone 7.8
- SQL Server 2005 in beta 2
- Codifica all'avanguardia con .NET MAUI: Scopri le potenzialità di sviluppo multi-piattaforma
- Utilizzare WebAssembly con .NET, ovunque
- Gestire la configurazione di ASP.NET Core su più ambienti
- Calcolare il resto di una divisione
- Segnala questa pagina ad un amico