In questo breve tutorial presentiamo un piccolo snippet di codice basato su jQuery che consente di rendere cliccabili le righe di una tabella. Il clic attiva poi un'azione, nello specifico l'apertura di una pagina collegata come link al contenuto della riga della tabella.
Tutto è nato da un'esigenza pratica. Completata, infatti, la pubblicazione della Guida CSS3, abbiamo avuto la necessità di rifinire le tabelle di supporto cross-browser delle proprietà che fanno da compendio alle lezioni.
L'idea era che ogni proprietà presente nelle tabelle fosse collegata tramite un link alla lezione in cui quella proprietà viene trattata. Nulla di complicato. Si può fare tutto anche senza ricorrere a jQuery, ma la soluzione che è stata adottata mantiene il markup HTML 'pulito' ed è sufficientemente generica da poter essere applicata e riusata senza modifiche in contesti analoghi. Tra l'altro, come vedremo, risolve brillantemente un potenziale problema che può presentarsi in queste situazioni.
Il codice HTML
A livello di codice HTML, per poter sfruttare lo script nella versione che presentiamo qui, sarà necessario realizzare una tabella ben strutturata. Ecco un estratto della parte che ci interessa in questa sede:
<tbody>
<tr data-href="http://css.html.it/guide/lezione/5097/opacity/">
<td>opacity</td>
<td>9.0+</td>
<td>1.0+</td>
<td>1.0+</td>
<td>1.0+</td>
<td>9.0+</td>
</tr>
<tr data-href="http://css.html.it/guide/lezione/5098/colore-rgba/">
<td>RGBa</td>
<td>9.0+</td>
<td>3.0+</td>
<td>3.1+</td>
<td>1.0+</td>
<td>10.0+</td>
</tr>
</tbody>Notiamo innanzitutto che i dati della tabella sono racchiusi in un tag tbody, al cui interno troviamo la classica struttura con righe (tr) e celle (td).
Per quello che vogliamo ottenere è fondamentale notare come è stato definito l'elemento tr. Ciascuna riga è accompagnata infatti da un attributo data-href in cui specifichiamo la pagina collegata. Si sfrutta insomma la possibilità offerta da HTML5 di definire attributi personalizzati per ciascun elemento, a patto che siano preceduti dal prefisso data-. Lo script andrà a 'cercare' proprio il contenuto di questo attributo quando si tratterà di ricavare la pagina collegata ad ogni riga.
Lo script
La parte Javascript è definita nella parte finale della pagina. Prima della chiusura del tag body, inseriamo queste righe:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
}).find('a').hover( function() {
$(this).parents('tr').unbind('click');
}, function() {
$(this).parents('tr').click( function() {
window.location = $(this).attr('data-href');
});
});
});
</script>Nella prima parte
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
</script>lo script non fa altro che aggiungere ad ogni riga una classe clickable (può essere sfruttata per aggiungere particolari regole di stile nel CSS) e collegare all'evento click l'apertura della pagina collegata, il cui indirizzo, come si vede, si ricava dal valore dell'attributo data-href tramite il metodo jQuery .attr().
Come chiarito dall'autore dello script, Matt Felten, tutto ciò potrebbe bastare.
Si può presentare però una situazione. Cosa succede infatti se all'interno di una cella abbiamo un link, magari una semplice àncora (#) che attiva una qualunque azione? Succede quello che si può verificare in questa demo che riprende, modificandola, quella originale. Cliccando su 'Edit' o 'Delete' veniamo reindirizzati ugualmente alla home page di Google! E non è certo questo che l'utente si aspetta cliccando su quei link.
La seconda parte dello script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
}).find('a').hover( function() {
$(this).parents('tr').unbind('click');
}, function() {
$(this).parents('tr').click( function() {
window.location = $(this).attr('data-href');
});
});
});
</script>serve proprio a impedire questo comportamento non desiderato. Quando passiamo il mouse su un link presente in una delle celle, viene disattivata la riga cliccabile, e tutto avviene secondo quanto desiderato.
Un ultimo ritocco prima di concludere. Dal momento che le righe diventano 'cliccabili' è buona norma far sì che il cursore si adegui, assumendo la forma tipica di quando passa sui link. Per ottenere l'effetto basterà aggiungere nel CSS questa semplice regola:
tbody tr.clickable:hover td {
cursor: pointer;
}