Miten saisi sellaisen toiminnon tietokannasta html-tauluun noudetulle datalle (satunnainen määrä rivejä), kuin keskustelupalstoilla, eli expand/collapse + ja miinus-plus painikkeilla? Näin kannasta noudettu suuri määrä dataa olisi piilossa kunnes käyttäjä valitsee näyttää sen.
Tässä on nyt varsin pikainen kyhäelmä:
<html>
<head>
<title>Expand/collapse</title>
<script type="text/javascript">
function expand(element) {
var item = document.getElementById(element);
if (item) {
item.style.visibility = 'visible';
item.style.position = 'static';
}
}
function collapse(element) {
var item = document.getElementById(element);
if (item) {
item.style.visibility = 'hidden';
item.style.position = 'absolute';
}
}
</script>
</head>
<body onload="collapse('yksi')">
<table style="border:1px solid black"><tr><th>
<a href="" onclick="expand('yksi'); return false">Expand</a>
<a href="" onclick="collapse('yksi'); return false">Collapse</a>
</th></tr><tr id="yksi"><td>
Row yksi here!
</td></tr></table>
</body>
</html>(En itse pidä inlinejavascriptistä, mutta menköön nyt tämän esimerkin kanssa, jotta vain olennainen löytyy...)
Kokeilin tuota ja nyt kun while-loopilla haen kaikki hakuehtojen rivit niin tuolla piiloutuu vain ensimmäinen rivi...?
Oletko antanut joka riville oman id:n ja muuttanut bodyn onload-kohtaa niin, että se piilottaa kaikki rivit?
Ja jos haluaa käyttää yhtä ainutta nappia sekä piilotukseen (esim. kuvanappi), että näyttämiseen, niin voisi käyttää yhtä ainutta JS funktiota tuossa:
function popElem( elem ){
var item = document.getElementById( elem );
if( item.style.visibility != "hidden" ){
item.style.visibility = "hidden";
item.style.position = "absolute";
}
else{
item.style.visibility = "visible";
item.style.position = "static";
}
}eikös ton voisi tehdä myös näin.
function ShowOrHide(d1, d2) {
if (d1 != '') DoDiv(d1);
if (d2 != '') DoDiv(d2);
}
function DoDiv(id) {
var item = null;
if (document.getElementById) {
item = document.getElementById(id);
} else if (document.all){
item = document.all[id];
} else if (document.layers){
item = document.layers[id];
}
if (!item) {
}
else if (item.style) {
if (item.style.display == "none"){ item.style.display = ""; }
else {item.style.display = "none"; }
}else{ item.visibility = "show"; }
}Pikkuhiljaa menee meikän taitojen yli, mutta eiköhän se tästä. Mites tuo käytännössä sitten toteutetaan tuo joka riville oma id? Tajuan kyllä suurin piirtein miten se on tarkoitus tehdä, mutta koodaustaidot eivät riitä.
Ei sen pahempaa, kuin vain vaihdat noihin js-funktioiden kutsuihin sen elementin id:n, jonka haluat piilotettavan. Ja tietenkin sillä piilotettavalla rivillä tulisi olla id, jotta siihen pääsisi käsiksi. Funktion kutsulla tarkoitan napissa/linkissä olevaa onclick-määrettä.
Esimerkki:
<img src="images/nappi.gif" alt="Piilota/Näytä boksi" onclick="popElem('rivin_ID');" />Sillä ei sitten enää ole merkitystä, sijoitatko tuon onclickin linkkiin vai johonkin kuvaan tai aivan mihin tahansa. Kunhan sijoitat sen siihen nappiin, josta tahdot rivin piilotettavan/näytettävän.
lahtis: on täysin turhaa tukea muuta kuin getElementById:tä: jokainen JavaScriptiä tukeva selain, joka on julkaistu vuoden 1998 jälkeen, tukee sitä. document.all ja document.layers jääkööt oman onnensa nojaan.
Hyvä tietää, että ton voi jotenkin paremmin tai uudella tavalla tehdä. Itse olen käyttänyt tota tapaa. Kun toi javascript on vähän tuntematon alue minulle, mutta kaikkea näköjään oppii tai ainakin huomaa että asian voi toisellakin tavalla tehdä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.