nicht angemeldet
Hallo,
Noch besser wäre natürlich ein kleines Pulldown-Menü auf der Übersichtsseite aller Autos. Da könnte man dann Maserati oder Audi oder was auch immer auswählen und dann würden in der nächsten Übersicht nur noch die Maseratis/Audis angezeigt werden und dann bei nem Klick halt wieder die Einzelansichten.
Falls sich das überhaupt mit JavaScript realisieren lässt.
Ja und ich habe mir schon gestern gedacht, dass diese Anfrage kommt ;-)
Wenn ich den Code sehe wird mir das immer klar und dann kann ichs fürs nächste mal auch meistens anwenden, aber ich komm halt gerade nicht allein auf die Lösung.
Hmm ... aber wenn du jetzt sagst, dass du eigentlich auch noch auf die verlinkten XML-Dokumente (xml:link="simple" naechster="Maserati" href="mas2.xml") zugreifen und diese Darstellen willst ... also irgendwas muss du dann auch selbst für deine Klasur tun ;-)
Grüße Thomas
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:key name="markenauswahl" match="auto" use="marke" /> <xsl:template match="/"> <html> <head> <title>Autoliste</title>
<style type="text/css"> .einzeln { display:none; } .markentabelle { display:none; } th { background-color: #B4CEA7; }
.spalte { background-color: #B4CEA7; font-weight: bold; width=140; }
.daten { background-color: #F7F9C1; width=100; }
</style>
<script type="text/javascript"> var arrAutos = new Array(<xsl:apply-templates select="autos" mode="jsarray" />); var arrAutosTabelle = new Array(<xsl:apply-templates select="autos" mode="markejsarray" />);
<![CDATA[ function displayLayer(strID) { document.getElementById(strID).style.display = "block"; }
function hideLayer(strID) { document.getElementById(strID).style.display = "none"; }
function showAuto(strArrayName, strID) { for(i=0; eval("i<= " + strArrayName + ".length-1"); i++) { if(eval(strArrayName + "[i] != strID")) { hideLayer(eval(strArrayName + "[i]")); } else displayLayer(strID); } }
function hideSingleAutos() { for(i=0; i<=arrAutos.length-1; i++) { hideLayer(arrAutos[i]); } } ]]> </script> </head> <body> <form action="#"> <select onchange="showAuto('arrAutosTabelle', this.form.markenauswahl.options[this.form.markenauswahl.selectedIndex].value); hideSingleAutos();" name="markenauswahl"> <option>Wählen Sie eine Marke</option> <xsl:for-each select="autos/auto[generate-id() = generate-id(key('markenauswahl', marke)[1])]"> <xsl:sort select="marke" /> <option value="marke_{generate-id()}"><xsl:value-of select="marke" /></option> </xsl:for-each> </select> </form> <xsl:apply-templates select="autos" mode="alle" /> <xsl:apply-templates select="autos" mode="einzeln" /> </body> </html> </xsl:template>
<xsl:template match="autos" mode="alle"> <xsl:for-each select="auto[generate-id() = generate-id(key('markenauswahl', marke)[1])]"> <xsl:variable name="strLayerID" select="generate-id()" /> <xsl:variable name="automarke" select="marke" /> <div id="marke_{generate-id(.)}" class="markentabelle"> <h1>Autoliste</h1> <p/> <table border="1"> <tr> <th>Nr.</th> <th>Foto</th> <th>Marke</th> <th>Modell</th> <th>Preis</th> <th>Adresse</th> <th>PS</th> <th>Erstzulassung</th> <th>Bauart</th> <th>Farbe</th> <th>Kilometerleistung</th> <th>Extras</th> </tr> <xsl:apply-templates select="key('markenauswahl', $automarke)" mode="alle"> <xsl:with-param name="strLayerID" select="$strLayerID" /> </xsl:apply-templates> </table> </div> </xsl:for-each> </xsl:template>
<xsl:template match="auto" mode="alle"> <xsl:param name="strLayerID" /> <xsl:variable name="ID" select="generate-id(.)" /> <tr> <td> <xsl:number format="1"/> </td> <td> <xsl:apply-templates select="foto"/> </td> <td align="center" width="90"> <a href="#" onclick="hideLayer('marke_{$strLayerID}');showAuto('arrAutos', '{$ID}');"><xsl:value-of select="marke" /></a> </td> <xsl:apply-templates select="modell | preis" mode="alle"/> <xsl:apply-templates select="adresse" mode="alle"/> <xsl:apply-templates select="ps | EZ | art | farbe | kilometer | extras" mode="alle"/> </tr> </xsl:template>
<xsl:template match="foto"> <img align="left"> <xsl:attribute name="src"><xsl:value-of select="@quelle"/></xsl:attribute> </img> </xsl:template>
<xsl:template match="foto2"> <img align="center"> <xsl:attribute name="src"><xsl:value-of select="@quelle"/></xsl:attribute> </img> </xsl:template>
<xsl:template match="modell | preis" mode="alle"> <td> <xsl:value-of select="."/> </td> </xsl:template>
<xsl:template match="adresse" mode="alle"> <td> <xsl:value-of select="plz"/><br></br> <xsl:value-of select="ort"/> </td> </xsl:template>
<xsl:template match="ps | EZ | art | farbe | kilometer | extras" mode="alle"> <td> <xsl:value-of select="."/> </td> </xsl:template>
<xsl:template match="autos" mode="einzeln"> <xsl:apply-templates select="auto" mode="einzeln" /> </xsl:template>
<xsl:template match="auto" mode="einzeln"> <xsl:variable name="strLayerID" select="generate-id(key('markenauswahl', marke)[1])" /> <div id="{generate-id(.)}" class="einzeln"> <table border="1"> <tr> <th colspan="3"> <xsl:value-of select="modell" /> </th> </tr> <tr> <td class="spalte">Preis</td> <td class="daten"><xsl:value-of select="preis" /></td> <td rowspan="10" width="400" align="center"> <xsl:apply-templates select="foto2"/> </td> </tr> <tr> <td class="spalte">Adresse</td> <xsl:apply-templates select="adresse" mode="einzeln"/> </tr> <tr> <td class="spalte">PS</td> <td class="daten"><xsl:value-of select="ps" /></td> </tr> <tr> <td class="spalte">Erstzulassung</td> <td class="daten"><xsl:value-of select="EZ" /></td> </tr> <tr> <td class="spalte">Bauart</td> <td class="daten"><xsl:value-of select="art" /></td> </tr> <tr> <td class="spalte">Farbe</td> <td class="daten"><xsl:value-of select="farbe" /></td> </tr> <tr> <td class="spalte">Kilometerleistung</td> <td class="daten"><xsl:value-of select="kilometer" /></td> </tr> <tr> <td class="spalte">Extras</td> <td class="daten"><xsl:value-of select="extras" /></td> </tr> <tr> <td class="spalte">Kraftstoffart</td> <td class="daten"><xsl:value-of select="kraftstoff" /></td> </tr> <tr> <td class="spalte">Getriebe</td> <td class="daten"><xsl:value-of select="getriebe" /></td> </tr> </table> <p> <a href="#" onclick="hideLayer('{generate-id(.)}');displayLayer('marke_{$strLayerID}');">Gesamtübersicht anzeigen</a> </p> </div> </xsl:template>
<xsl:template match="adresse" mode="einzeln"> <td class="daten"> <xsl:value-of select="name"/><br></br> <xsl:value-of select="plz"/><br></br> <xsl:value-of select="ort"/> </td> </xsl:template>
<xsl:template match="autos" mode="jsarray"> <xsl:for-each select="auto"> xsl:text"</xsl:text><xsl:value-of select="generate-id(.)" />xsl:text"</xsl:text><xsl:if test="position() != last()">xsl:text, </xsl:text></xsl:if> </xsl:for-each> </xsl:template> <xsl:template match="autos" mode="markejsarray"> <xsl:for-each select="auto[generate-id() = generate-id(key('markenauswahl', marke)[1])]"> xsl:text"</xsl:text><xsl:value-of select="concat('marke_', generate-id(.))" />xsl:text"</xsl:text><xsl:if test="position() != last()">xsl:text, </xsl:text></xsl:if> </xsl:for-each> </xsl:template> </xsl:stylesheet>