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
Triggerare una pipeline su un altro repository di Azure DevOps
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Collegare applicazioni server e client con .NET Aspire
Introduzione ai web component HTML
Ordine e importanza per @layer in CSS
Testare l'invio dei messaggi con Event Hubs Data Explorer
Anonimizzare i dati sensibili nei log di Azure Front Door
Configurare e gestire sidecar container in Azure App Service
Applicare un filtro per recuperare alcune issue di GitHub
Creare una libreria CSS universale: Clip-path
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL