Avrei la necessità di rendere cliccabile tutta la riga di una tabella a fronte di un link su una qualsiasi delle celle della riga.
Ho provato a riutilizzare questo script previsto inizialmente per un <div> copiato da una risposta di Pierofix di un po' di tempo fa.
Ma la mia scarsa conoscenza di js mi blocca. Riesco ad ottenere il risultato solo sulla prima riga e solo se il link è nella prima cella.
Qualcuno mi dice se si può fare e come?
codice:
window.onload = function()
{
// Preleviamo tutti i tr a cui ci interessa applicare il nostro effetto.
// Io li ho identificati nel mark-up con la classe 'informazione'
var TR = document.getElementsByTagName('tr')
var informazioni = new Array()
for (var i = 0; i < TR.length; i++)
{
if ( TR.item(i).className == 'informazione' )
{
informazioni.push(TR.item(i))
}
}
// Creiamo una funzione che legga il link
// e lo attribuisca all'intero tr
function attribuisci_link(elemento)
{
var TD = document.getElementsByTagName('td')
for (var y = 0; y < TD.length; y++)
{
var titolo = elemento.getElementsByTagName('td').item(y)
var collegamento = titolo.getElementsByTagName('a').item(y)
var collegamento_link = collegamento.getAttribute('href')
elemento.onclick = function()
{
location.href = collegamento_link
}
elemento.onmouseover = function()
{
this.className += ' over'
}
elemento.onmouseout = function()
{
this.className = this.className.replace(' over', ' ')
}
}
}
// Attribuiamo la funzione a tutti
// i tr interessati
for (var i = 0; i < informazioni.length; i++)
{
attribuisci_link(informazioni[i])
}
}
La tabella di prova è così strutturata:
Codice PHP:
<table border="1">
<tr class="informazione"><td>[url="news/link1.html"]cella 1.1[/url]</td><td>cella 1.2</td></tr>
<tr class="informazione"><td>cella 2.1</td><td>[url="news/link2.html"]cella 2.2[/url]</td></tr>
<tr class="informazione"><td>cella 3.1</td><td>cella 3.2</td></tr>
</table>