Haluaisin tietää, mitä taulukon solua (cell) kayttaja klikkaa, tai ainakin solun sisällön. Miten onnistuu?
Joka soluun , ja tuossa funktiossa sitten solun indeksi selville this.cellIndex:lla? Vai pitääkö tieto solusta jotenkin välittää funktiolle html:n puolelta? En saa toimimaan..
Entä solun sisältö? Olen ajatellut, että this.innerHTML voisi toimia, mutta enpä osaa.
Joka soluun , ja tuossa funktiossa sitten solun indeksi selville this.cellIndex:lla? Vai pitääkö tieto solusta jotenkin välittää funktiolle html:n puolelta? En saa toimimaan..
Entä solun sisältö? Olen ajatellut, että this.innerHTML voisi toimia, mutta enpä osaa.
Vastaukset 5
Vanhimmat
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
Ei ollutkaan sitten ihan niin yksinkertainen juttu kuin luulin. Kiitokset ohjeista, taitavat vaatia vähän sulattelua..
http://www.mochikit.com/
Mochikit on JavaScript-kirjasto (ilmainen), joka piilottaa tuollaiset rumat detaljit ohjelmoijilta. Sillä on useita kehittäjiä, jonka takia se toimii luotettavasti useilla selaimilla. Heillä on luettelo kaikista, joilla sitä on testattu.
Älä rupea itse värkkäämään jokaisen eri selaimen ongelmien kanssa. Anna muiden huolehtia siitä, koska he tekevät sen paremmin kuin mitä sinä nopeasti kerkeät. Ovat jo tehneet...
Mochikit on tutustumisen arvoinen kirjasto.
Pohdiskelin ohjeitasi ja totesin, että en tarvitsekaan solun indeksiä loppujen lopuksi, vain vaan sen sisällön. Ja sen laitoin php:lla suoraan solun id:ksi.
Sitten pientä ajax-tyyppistä sähläystä, jolla saan id:n siirtymään argumentiksi tietokanta-kyselylle ja lopuksi päivitän alkuperäisen taulukon kokonaan. Kummallinen juttu vain oli, että taulukko piti laittaa div:n sisään ennen kuin sain uuden taulukon "piirtymään" oikein yhdellä browserilla (mobiili Opera?)..
En saanut edes kirjaston omaa demoa näkymään oikein (http://www.mochikit.com/examples/ajax_tables/index.html)..
selain ei ladannut esimerkin taulukkoa kokonaan.
Eli ehkäpä käytössä oleva browserini ei ole ihan standardi (mobiili Opera??), joten eipä taida auttaa minua ainakaan vielä. Kiitokset vinkistä kuitenkin!