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
Eseguire query in contemporanea con EF
Gestione opzioni colonna nella Blazor QuickGrid
Mischiare codice server side e client side in una query LINQ con Entity Framework
Realizzare un accordion con gli elementi HTML details e summary
Mappare una complex property di una entity su un campo JSON
Integrare LLM alle nostre applicazioni in .NET con MCP
Arricchire l'interfaccia di .NET Aspire
Utilizzare Hybrid Cache in .NET 9
Integrare Agenti A2A in Azure API Management
Keynote .NET Conference Italia 2025
Gestione delle scrollbar dinamiche in HTML e CSS
Ridurre il reflow ottimizzando il CSS




