Ah, ok: allora la tabella è effettivamente giustificabile.
Vado con un altro esempio.
codice:
XHTML
<form id="ordina_prodotti" action="...">
<table>
<caption>Prodotti della linea <cite>Acer</cite></caption>
<thead>
<tr>
<th scope="col">Prodotto</th>
<th scope="col">Confronta</th>
</tr>
</thead>
<tbody id="elenco_prodotti">
<tr>
<td>
<label for="aspire">Aspire</label>
</td>
<td>
<input id="aspire" name="aspire" type="checkbox" value="aspire" />
</td>
</tr>
</tbody>
</table>
</form>
CSS
.prodotto_hover
{
background-color:#D4D4D4;
}
.prodotto_selezionato
{
background-color:#D41122;
}
Javascript
window.onload = function()
{
var elenco_prodotti = document.getElementById('elenco_prodotti')
var prodotti = elenco_prodotti.getElementsByTagName('tr')
for (var i = 0; i < prodotti.length; i++)
{
prodotti.item(i).onmouseover = function()
{
this.className += ' prodotto_hover'
}
prodotti.item(i).onmouseout = function()
{
this.className = this.className.replace('prodotto_hover', ' ')
}
}
function colora_prodotti()
{
for (var i = 0; i < prodotti.length; i++)
{
var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
if ( input_prodotto.checked )
{
prodotti.item(i).className = ' prodotto_selezionato'
}
else
{
prodotti.item(i).className = prodotti.item(i).className.replace('prodotto_selezionato', ' ')
}
}
}
for (var i = 0; i < prodotti.length; i++)
{
var input_prodotto = prodotti.item(i).getElementsByTagName('input').item(0)
input_prodotto.onclick = function()
{
colora_prodotti()
}
}
}