Questo è un esercizietto, tanto per trarre profitto dallo script di Br1
codice:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script>
function table1_onclick(e)
{
//accedo all'oggetto event
if(!e) var e = window.event;
//accedo all'elemento che scatena l'evento
var target = (e.target)?e.target:e.srcElement;
//solo per l'elemento TD recupero quello che c'è dentro
if(target.tagName.toUpperCase() == "TD")
{
//recupero la riga
var riga = target.parentNode;
//recupero l'indice della riga
var indiceriga = riga.rowIndex;
//recupero l'indice della colonna
var indicecolonna = target.cellIndex;
//ignoro la riga di intestazione e la prima colonna
//e trovo il contenuto della cella
if(indiceriga > 0 && indicecolonna > 0) alert(target.innerHTML );
}
else
{
//trovo i checkbox
if(target.type == "checkbox")
{
//ricavo la riga
var riga = target.parentNode.parentNode;
//cambio il colore di sfondo della riga
riga.style.backgroundColor = (target.checked)?"red":"white";
}
}
}
</script>
</HEAD>
<BODY>
<h3>Clicca sulle celle della tabella, con IE o Firefox, e recupera
l'oggetto che ha scatenato l'evento
</h3>
<table id="table1" border="1" onclick="table1_onclick(event);">
<tr><td>colonna0<td>colonna1</td><td>colonna2</td></tr>
<tr><td><INPUT type="checkbox" name=checkbox1></td><td>a00</td><td>a01</td></tr>
<tr><td><INPUT type="checkbox" name=checkbox1><td>a10</td><td>a11</td></tr>
<tr><td><INPUT type="checkbox" name=checkbox1><td>a20</td><td>a21</td></tr>
</table>
</BODY>
</HTML>
Funziona con IE e Firefox, non so con i browser più vecchi.
E' sempre una variazione su tema. In pratica centralizzi il codice sulla tabella. Lì imposti l'evento onclick.
Una volta intercettato l'evento, ti ricavi l'oggetto che lo ha scatenato e ti comporti di conseguenza.
Un possibile miglioramento, per esercizio, sarebbe quello di aggiungere righe, cancellare righe e modificare righe.