Hallo,
------
Ich kann ja schlecht für alle Autos eine eigene Tabelle mit den Daten erstellen. Wenn das dann z.B. 100 Autos wären, bräuchte ich ja 100 Tabellen?
------
Doch, genau das wäre die Folge und der Nachteil des Vorschlages (bis auf das, dass es für dich reicht, wenn du nur 'eine' Tabelle erstellst. XSLT generiert dann automatisch alle anderen.
z.B. sowas generiert für jede Auto eine Tabelle:
<xsl:template match="auto">
<div id="{generate-id()}">
<table>
...
</table>
</div>
</xsl:template>
Im JavaScript brauchst du dann nur die entsprechende ID an die Funktion zu übergeben.
Mal anders gefragt.
Geht das nicht auch so, dass ich in meinem XSL-File ein eigenes Template anlege für die Ausgabe der Daten EINES Autos und dass ich dann dieses Template in meinem jeweiligen Autolink in der XML verlinke?
Nur wie geht das?
Nein. Du kannst kein XSLT-Template in HTML verlinken.
Du kannst paramter an dein Stylesheet übergeben, aber auch das geht nur mit JavaScript und dafür - d.h. wie das geht - habe ich dir die zwei Beiträge aus dem Archiv verlinkt.
Und woher weiß das Template dann welche Daten es ausgeben muss. Sind ja dann nur die Daten des Schiffes, das ich angeklickt habe.
Sind es nun Autos oder Schiffe?? ;-)
Ansonten siehe oben: via Paramterübergabe und wie gesagt mit AJAX kannst du das auch erreichen.
Ich weiss nicht wie dringend du diese Sachen für deine Klausur brauchst, d.h. je nach deiner Zeit muss du die Varianten wählen, die dir am besten passt.
Hier jetzt ein schnell gemachter Code:
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:template match="/">
<html>
<head>
<title>Autoliste</title>
<style type="text/css">
.einzeln { display:none; }
</style>
<script type="text/javascript">
var arrAutos = new Array(<xsl:apply-templates select="autos" mode="jsarray" />);
<![CDATA[
function displayLayer(strID) {
document.getElementById(strID).style.display = "block";
}
function hideLayer(strID) {
document.getElementById(strID).style.display = "none";
}
function showAuto(strID) {
for(i=0; i<=arrAutos.length-1; i++) {
if(arrAutos[i] != strID) {
hideLayer(arrAutos[i]);
}
else
displayLayer(strID);
}
}
]]>
</script>
</head>
<body>
<xsl:apply-templates select="autos" mode="alle" />
<hr />
<xsl:apply-templates select="autos" mode="einzeln" />
</body>
</html>
</xsl:template>
<xsl:template match="autos" mode="alle">
<h1>Autoliste</h1>
<p/>
<table border="1">
<tr>
<th>Nr.</th>
<th>Foto</th>
<th>Marke</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="auto[marke='Maserati']" mode="alle"/>
</table>
</xsl:template>
<xsl:template match="auto" mode="alle">
<xsl:variable name="ID" select="generate-id(.)" />
<tr>
<td>
<xsl:number format="1"/>
</td>
<td>
<xsl:apply-templates select="foto"/>
</td>
<td>
<a href="#" onclick="showAuto('{$ID}')"><xsl:value-of select="marke" /></a>
</td>
<xsl:apply-templates select="preis | adresse | 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="preis | adresse | 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">
<div id="{generate-id(.)}" class="einzeln">
<table border="1">
<tr>
<th colspan="3">
<xsl:value-of select="marke" />
</th>
</tr>
<tr>
<td>Preis</td>
<td><xsl:value-of select="preis" /></td>
<td rowspan="8">
<xsl:apply-templates select="foto"/>
</td>
</tr>
<tr>
<td>Adresse</td>
<td><xsl:value-of select="adresse" /></td>
</tr>
<tr>
<td>PS</td>
<td><xsl:value-of select="ps" /></td>
</tr>
<tr>
<td>Erstzulassung</td>
<td><xsl:value-of select="EZ" /></td>
</tr>
<tr>
<td>Bauart</td>
<td><xsl:value-of select="art" /></td>
</tr>
<tr>
<td>Farbe</td>
<td><xsl:value-of select="farbe" /></td>
</tr>
<tr>
<td>Kilometerleistung</td>
<td><xsl:value-of select="kilometer" /></td>
</tr>
<tr>
<td>Extras</td>
<td><xsl:value-of select="extras" /></td>
</tr>
</table>
</div>
</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:stylesheet>