nicht angemeldet
Hallo,
also ich habe mir das folgendermaßen gedacht:
Am Anfang kommt man auf eine Seite mit der "aktuelle CDs"-Tabelle (also hier werden nur die CDs angezeigt, die in diesem Jahr erschienen sind). (erledigt) Unter dieser "aktuelle CDs"-Tabelle ist ein Link, durch den statt der "aktuelle CDs"- eine "alle CDs"-Tabelle angezeigt wird. (also es werden alle CDs aus der cds.xml angezeigt) (mein aktuelles Problem) In beiden Tabellen soll es für jede CD einen Link zu einer Detailseite geben. (erledigt)
Wie ich sagte, muss du etwas anderes vorgehen, die Transformation mittels JavaScript auslösen und die Parameters auch damit übergeben. Unten ist eine HTML-Datei und das geänderte XSL (wobei ich mich nicht um deinen HTML-Code an sich kümmerte (also center und Co. gehören irgendwie weg und statt den vielen <p>s einfach CSS-Klasse(n) für die <td>s verwenden etc.))
Grüße Thomas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>CD-Sammmlung</title> <script language="JavaScript" type="text/javascript"> var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var XMLDatei = "cdliste.xml"; // Pafad zur XML-Datei var XSLDatei = "cdliste.xsl"; // Pafad zur XSL-Datei var objectXML; var objectXSL; var objectXSLCache; var objectXSLTProcessor; var HTMLAusgabe; var jahr = ""; var cdid = ""; var cat = "";
function transformation() { // Abfrage für den Internet Explorer if (window.ActiveXObject) { // XML laden objectXML = new ActiveXObject("MSXML2.DOMDocument"); objectXML.async = false; objectXML.load(XMLDatei);
// XSL laden objectXSL = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.4.0"); objectXSL.async = false; objectXSL.load(XSLDatei); //cachen das XSLT für bessere performance objectXSLCache = new ActiveXObject("Msxml2.XSLTemplate.4.0"); objectXSLCache.stylesheet = objectXSL; }
// Abfrage für Mozilla / Netscape else if (window.ChromeWindow) { // Im Mozilla erst XSL laden objectXSLTProcessor = new XSLTProcessor(); objectXSL = new XMLHttpRequest(); objectXSL.open("GET", XSLDatei, false); objectXSL.send(null); objectXSL = objectXSL.responseXML; objectXSLTProcessor.importStylesheet(objectXSL);
// XML laden objectXML = new XMLHttpRequest(); objectXML.open("GET", XMLDatei, false); objectXML.send(null); objectXML = objectXML.responseXML; } else { alert("Ihr Browser unterstützt leider keine XML-XSL-Transformation mittels JavaScript"); } jahr = currentYear; showCD(jahr, cdid, cat); }
function showCD(jahr, cdid, cat) { if (window.ActiveXObject) { objectXSLTProcessor = objectXSLCache.createProcessor(); objectXSLTProcessor.input = objectXML; objectXSLTProcessor.addParameter("jahr", jahr, ""); objectXSLTProcessor.addParameter("cdid", cdid, ""); objectXSLTProcessor.addParameter("cat", cat, ""); objectXSLTProcessor.transform(); document.getElementById("output").innerHTML = objectXSLTProcessor.output; } else if (window.ChromeWindow) { objectXSLTProcessor.setParameter(null, "jahr", jahr); objectXSLTProcessor.setParameter(null, "cdid", cdid); objectXSLTProcessor.setParameter(null, "cat", cat); HTMLAusgabe = objectXSLTProcessor.transformToFragment(objectXML, document); document.getElementById("output").innerHTML = ""; document.getElementById("output").appendChild(HTMLAusgabe); } } </script> <style type="text/css"> h1,h2,p { font-family:Arial,Tahoma,'Wide Latin'; } h1 { font-size:24px; color:blue; letter-spacing:5px; } h2 { font-size:15px; letter-spacing:3px; line-height:140%; padding-left:5px; } p, th { font-size:11px; letter-spacing:1px; line-height:160%; display:inline; padding-left:8px; text-align:justify; } th { text-align:left; } </style> </head> <body onload="transformation();"> <body> <div id="output"> </div> </body> </html>
und hier das geänderte XSL dazu
<?xml version="1.0" encoding="iso-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:param name="jahr" /> <xsl:param name="cdid" /> <xsl:param name="cat" />
<xsl:key name="cat" match="kategorie" use="." />
<xsl:template match="/"> xsl:choose <xsl:when test="$cdid != ''"> <xsl:apply-templates select="cdliste/cd[cd_id = $cdid]" /> </xsl:when> <xsl:when test="($jahr != '')"> <xsl:apply-templates select="cdliste" mode="aktuelle" /> </xsl:when> <xsl:when test="($cat != '')"> <xsl:apply-templates select="cdliste" mode="kategorie" /> </xsl:when> xsl:otherwise <xsl:apply-templates select="cdliste" mode="alle" /> </xsl:otherwise> </xsl:choose> </xsl:template>
<xsl:template match="cdliste" mode="aktuelle"> <center> <h1>A k t u e l l e - C D s</h1> <table border="0" cellpadding="0" cellspacing="0" width="600"> <colgroup> <col width="25%" span="4" /> </colgroup> <xsl:for-each select="cd[jahr = $jahr]"> <tr> <td colspan="4"> <h2><a href="javascript:showCD('', '{cd_id}', '')"><xsl:value-of select="name" /></a></h2> </td> </tr> <tr> <td rowspan="2"> <a href="javascript:showCD('', '{cd_id}', '')"><img border="0" src="{thumb}" /></a> </td> <td>JAHR</td> <td>PREIS</td> <td>LABEL</td> </tr> <tr> <td><p><xsl:value-of select="jahr" /></p></td> <td><p><xsl:value-of select="preis" /></p></td> <td><p><xsl:value-of select="label" /></p></td> </tr> </xsl:for-each> </table> <h2> <a href="javascript:showCD('','','')">Alle CDs anzeigen</a> </h2> </center> </xsl:template>
<xsl:template match="cdliste" mode="kategorie"> <center> <h1>CDs in der Kategorie: <xsl:value-of select="$cat" /></h1> <table border="0" cellpadding="0" cellspacing="0" width="600"> <colgroup> <col width="25%" span="4" /> </colgroup> <xsl:for-each select="cd[kategorie = $cat]"> <tr> <td colspan="4"> <h2><a href="javascript:showCD('', '{cd_id}', '')"><xsl:value-of select="name" /></a></h2> </td> </tr> <tr> <td rowspan="2"> <a href="javascript:showCD('', '{cd_id}', '')"><img border="0" src="{thumb}" /></a> </td> <td>JAHR</td> <td>PREIS</td> <td>LABEL</td> </tr> <tr> <td><p><xsl:value-of select="jahr" /></p></td> <td><p><xsl:value-of select="preis" /></p></td> <td><p><xsl:value-of select="label" /></p></td> </tr> </xsl:for-each> </table> <h2> <a href="javascript:showCD('','','')">Alle CDs anzeigen</a> </h2> </center> </xsl:template>
<xsl:template match="cdliste" mode="alle"> <center> <h1>A l l e - C D s</h1> <form action="" style="width:600px;height:50px;" name="kategorien"> <fieldset> <legend>Kategorien</legend> <select name="cat" onchange="showCD('','', document.kategorien.cat.options[document.kategorien.cat.selectedIndex].value)"> <option value="">Kategorie wählen</option> <xsl:for-each select="cd/kategorie[generate-id(.) = generate-id(key('cat', .)[1])]"> <option value="{.}"><xsl:value-of select="." /></option> </xsl:for-each> </select> </fieldset> </form> <br /> <table border="0" cellpadding="0" cellspacing="0" width="600"> <colgroup> <col width="25%" span="4" /> </colgroup> <xsl:for-each select="cd"> <xsl:sort select="jahr" order="descending" /> <tr> <td colspan="4"> <h2><a href="javascript:showCD('', '{cd_id}', '')"><xsl:value-of select="name" /></a></h2> </td> </tr> <tr> <td rowspan="2"> <a href="javascript:showCD('', '{cd_id}', '')"><img border="0" src="{thumb}" /></a> </td> <td>JAHR</td> <td>PREIS</td> <td>LABEL</td> </tr> <tr> <td><p><xsl:value-of select="jahr" /></p></td> <td><p><xsl:value-of select="preis" /></p></td> <td><p><xsl:value-of select="label" /></p></td> </tr> </xsl:for-each> </table> </center> </xsl:template>
<xsl:template match="cd"> <center> <h1> <xsl:value-of select="name" /> </h1> <table border="0" cellpadding="0" cellspacing="0" width="600"> <colgroup> <col width="200" /> <col width="200" /> <col width="200" /> </colgroup> <tr> <td align="left" colspan="2"> <img> <xsl:attribute name="src"> <xsl:value-of select="bild[@id='1']" /> </xsl:attribute> </img> </td> <td valign="middle"> <h2>Art:</h2> <br /> <p> <xsl:value-of select="art" /> </p> <br /> <h2>Baujahr:</h2> <br /> <p> <xsl:value-of select="jahr" /> </p> <br /> <h2>Preis:</h2> <br /> <p> <xsl:value-of select="preis" /> </p> <br /> <h2>Label:</h2> <br /> <p> <xsl:value-of select="label" /> </p> <br /> </td> </tr> <tr> <td colspan="3" height="20" /> </tr> <tr> <td valign="middle"> <h2>Beschreibung:</h2> <br /> <p> <xsl:value-of select="beschreibung" /> </p> </td> <td align="right" colspan="2"> <img> <xsl:attribute name="src"> <xsl:value-of select="bild[@id='2']" /> </xsl:attribute> </img> </td> </tr> <tr> <td colspan="3" height="20" /> </tr> <tr> <td align="left" colspan="2"> <img> <xsl:attribute name="src"> <xsl:value-of select="bild[@id='3']" /> </xsl:attribute> </img> </td> <td valign="middle"> <xsl:for-each select="detail"> <h2> <xsl:value-of select="detailname" /> </h2> <br /> <p> <xsl:value-of select="detailwert" /> </p> <br /> </xsl:for-each> </td> </tr> <tr> <td /> <td align="right" colspan="2"> <img> <xsl:attribute name="src"> <xsl:value-of select="bild[@id='4']" /> </xsl:attribute> </img> </td> </tr> </table> <a href="javascript:showCD('','','')"> <h2> <u>ZURÜCK</u> </h2> </a> </center> </xsl:template>
</xsl:stylesheet>
Gunnar Bittersmann