Finora abbiamo analizzato delle funzioni che agiscono su un particolare elemento della pagina filtrando i risultati della stessa. Ma per trovare il padre o i figli di un nodo?
Se volessi aggiungere una riga di intestazione alla mia tabella con 'title' e 'category', potrei farlo aggiungendo tag 'th' all'interno della prima riga. Se inoltre volessi darle un altro colore potrei fare una ulteriore classe css 'table-heading'
Ho usato inoltre altri metodi per ottenere gli stessi risultati estetici sulla tabella:
CSS code:
.table-heading {background-color: #00FFFF;}
Javascript code:
$(document).ready(function() {
$('th').parent().addClass('table-heading');
$('tr:not([th]):even').addClass('even');
$('tr:not([th]):odd').addClass('odd');
$('td:contains("Henry")').addClass('highlight');
});
Queste sono le operazioni che eseguo:
<table>
<tr><th>Title</th><th>Category</th></tr>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td></tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
| Title | Category |
|---|---|
| As You Like It | Comedy |
| All's Well that Ends Well | Comedy |
| Hamlet | Tragedy |
| Macbeth | Tragedy |
| Romeo and Juliet | Tragedy |
| Henry IV, Part I | History |
| Henry V | History |
E se volessi spostare la classe 'highlight' dalla colonna del title ed aggiungerla alla colonna category? Potrei usare uno qualunque di questi script:
Javascript code:
$('td:contains("Henry")').siblings().addClass('highlight'); --- cerco tutti i 'td' che contengono la parola "Henry", poi ne recupero tutti i fratelli con il metodo 'siblings()' e aggiungo la classe 'highlight'.
$('td:contains("Henry")').parent().find('td:gt(0)').addClass('highlight'); --- cerco tutti i 'td' che contengono la parola "Henry", poi ne recupero il padre ('tr') con il metodo 'parent()', trovo tutti i 'td' all'interno che hanno indice più grande di 0.
$('td:contains("Henry")').parent().find('td:eq(1)').addClass('highlight').end().find('td:eq(2)').addClass('highlight'); --- cerco tutti i 'td' che contengono la parola "Henry", poi ne recupero il padre ('tr') con il metodo 'parent()', trovo il 'td' che ha indice 1 e aggiungo la classe 'highlight', cancello l'ultimo find e ricomincio ricorsivamente.
Ad ogni modo questo sarebbe in ogni caso il risultato:
<table>
<tr><th>Title</th><th>Category</th></tr>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td></tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</table>
| Title | Category |
|---|---|
| As You Like It | Comedy |
| All's Well that Ends Well | Comedy |
| Hamlet | Tragedy |
| Macbeth | Tragedy |
| Romeo and Juliet | Tragedy |
| Henry IV, Part I | History |
| Henry V | History |
In JQuery il codice può essere distribuito anche su più righe favorendone la leggibilità. Cfr. Code sample