Simple lister fra XML-databaser

Når man har lavet sin XML-database, er der forskellige måder at trække data ud på igen. Den helt simple er, at få indholdet skrevet ud som en liste, f.eks. en tabel.

At skrive hele indholdet ud, når man lige har lavet en database kan umiddelbart virke som at gå over åen efter vand, for så kunne man lige så godt bare lave tabellen og spare en fil og et JavaScript og dermed få en side der er hurtigere og lettere at lave. Det er imidlertid sådan, at der findes brugere der kan gå helt i sort over et søgefelt. De skimmer hellere en alenlang liste igennem efter det de søger, end at skulle foretage et valg ved at skrive i et søgefelt, eller de ved ikke helt hvad de søger, før de ser det. Man kan derfor med fordel tilbyde valget mellem en søgning i databasen eller at få hele indholdet ud, så man selv kan gennemlæse indholdet efter det man måtte søge.

XML-filen består af et felt man søger i, og et felt man returnerer. Det kan sagtens være det samme felt, men ofte er det en feltværdi, f.eks. et nøgleord, vi søger på og får f.eks. forklaringen returneret. Hvis vi prøver at lave en liste med ass icons som model, så kunne listen se således ud:


Listen får navnet Icons.xml, og ligger her i samme directory som HTML-filen med JavaScriptet der trækker listen.

Når man skal lave en simpel liste som denne, er det lettest og hurtigst at arbejde med et internt script med document.write(). Vil man gerne konstruere sit JavaScript på anden måde, af den ene eller den anden grund, er man selvfølgelig meget velkommen til dette.

JavaScriptet består af tre dele:

1. Indlæsning af XML-filen
2. Gennemløb af XML-filens Icon- og Explanationfelter
3. Indsættelse af feltværdier i en tabel

I dette eksempel laver vi en tabel, hvor der først er en celle med ikonen og derefter en celle med forklaringen.


Det første vi skal have fat i er XML-filen. Til dette anvender vi JavaScriptet loadXMLDoc(). Hvordan det er lavet, kan læses her. Så langt ser JavaScriptet nu således ud:


Dernæst skal vi have fat i værdierne for de to tags Icon og Explanation. Dette gør vi med getElementsByTagName(""):


For at få data ind i en tabel, skal der nu laves en TABLE-tag. Vi laver den her med border-collapse:collapse, så cellerne sidder sammen. Dette gøre med document.write(), og så kommer det til at se således ud (husk slut-tag'en):


Tabellens indhold laves ligeledes med document.write(), hvor man bygger det op med TR- og TD-tags. Listen traverseres i dens fulde længde, specificeret med Icon_lmnt.length, hvilket ser således ud:



For hver postering startes en tabelrække, TR, og i hver sin celle, TD, indsættes feltværdierne for Icon og Explanation med variablernes firstChild.nodeValue. Her har cellerne fået specificeret padding og rammer, og den færdige kode kommer nu til at se således ud:



På skærmen kommer resultatet til at se således ud: