Programmazione Web Italia Codice, metodologie e idee dal mondo dello Sviluppo WebPWI Programmazione Web ItaliaHTMLCSSJSEng.NodeSecuritySegui su:
Sei in:
Funzionalità come il sorting e la paginazione permettono di interagire con una tabella in maniera più veloce ed efficente, spesso ci si affida a soluzioni di terzi, ma in questa guida vorrei farvi provare a sviluppare una tabella dinamica partendo da zero e utilizzando solo le versioni vanilla di HTML, JavaScript e CSS. Spero di esservi utile!
La nostra tabella dinamica si svilupperà in maniera progressiva partendo da una semplice soluzione statica con i dati tabellari scritti a mano dallo sviluppatore, procedendo con l'inserimento di dati ottenuti attraverso una chiamata HTTP e aggiungendo, infine, funzionalità più avanzate come la paginazione, il sorting e il filtering. Le varie sezioni saranno elaborate in momenti differenti e potrebbero non essere ancora disponibili: incoraggiate il mio lavoro condividendo questa pagina o mettendo un like!
Per iniziare e per ripassare un poco l'argomento, sviluppiamo una semplice tabella HTML utilizzando i tag previsti nelle specifiche HTML5. Qui di seguito scrivo il codice che definisce una tabella per un insieme di ipotetici utenti. Continua...
Il selettore :has(), proposto nelle specifiche CSS level 4, fin dalla fine del 2023 è adottato dalla maggior parte dei browser: è giunto il momento di capire come utilizzare questa nuova opportunità.
Il selettore :has() consente agli sviluppatori di selezionare elementi del DOM che contengono al loro interno elementi che rispondono al selettore passato come parametro nella funzione: :has(). E' essenzialmente un selettore che permentte di ottenere il "parent" degli elementi definiti attraverso il parametro.
Provo a fare un semplice esempio chiarificatore Continua...