Taulukon solun indeksi?

Olet kyllä oikeilla jäljillä ...tapahtumien käsittely tapahtuu hieman eri tavalla IE vs. Mozilla/FireFox/Opera selaimissa joten joudut hieman haarautumaan koodissa.

Määrittele ensin tapahtumakäsittelijä TD elementeille (object/node itse asiassa tässä yhteydessä):

function TaulukkosoluaKlikattu(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
if (evt) {
var tdObj = (evt.target) ? evt.target : evt.srcElement;
alert("Rivi " tdObj.parentNode.rowIndex " Sarake " tdObj.cellIndex "\n\nSisältö: " tdObj.innerHTML);

}

}

Huomioitavaa.

1. Mozilla Gecko pohjaisissa selaimissa tapahtumaobjekti välitetään parametrina, IE selaimessa tapahtumaobjekti on aina window.event

2. evt.target on tapahtuman kohdeobjekti(/node) (tässä tapauksessa "click" tapahtuman) Mozillassa ja evt.srcElement IE:ssä

3. tdObj.parentNode viittaa TR elementtiin jonka
lapsielementti on click-tapahtuman kohteena oleva TD elementti. Tällä tavalla saamme selville klikatun taulukkosolun rivinumeron.

4. Sisältö normaalisti .innerHTML ominaisuudella (innerHTML ei ole muuten W3C:n hyväksymä, mutta se on yleisesti hyvin tuettu nykyisissä selaimissa)


Tämän jälkeen voit liittää tapahtumakäsittelijän normaalisti jokaiseen TD elementtiin, esim:

R0C0   

(Huomaa että joudut käyttämään "event" sanaa edellisessä yhteydessä Mozillaa varten)

Edellä mainittu tapa on kuitenkin työläs jos sinulla on iso taulukko, parempi liittää tapahtumakäsittelijät skriptillä näin:



function InitPage()
{
var taulukko_obj = document.getElementById("demotaulukko");
var taulukon_solut = taulukko_obj.getElementsByTagName("td");
for (var i = 0; i < taulukon_solut.length; i ) {
taulukon_solut[i].onclick = TaulukkosoluaKlikattu;

}

}










R0C0      
   

R0C1


R0C2


R0C3


R0C4



R1C0


R1C1


R1C2


R1C3
   

R1C4
   



R2C0


R2C1


R2C2


R2C3


R2C4




R3C0


R3C1


R3C2


R3C3


R3C4

   





Jos kuitenkin haluat itse kirjoittaa manuaalisesti jokaiseen TD elementtiin tapahtumakäsittelijän, voit halutessasi hieman muuttaa tapahtumakäsittelijä koska nyt voit välittää clicktapahtuman kohdeobjektin suoraan tapahtumakäsittelijälle:

function TaulukkosoluaKlikattu(tdObj, evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
if (evt) {
alert("Rivi " tdObj.parentNode.rowIndex " Sarake " tdObj.cellIndex "\n\nSisältö: " tdObj.innerHTML);

}

}

R0C0   


Toivottavasti selkeni edes hieman...

Ron "hedgehog" Jeremy