Tabelle mit verschiedenen Ansichten von Christoph K, 20.07.2006 15:24

Tabelle mit verschiedenen Ansichten

Christoph K 20.07.2006 15:24

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)

Wenn man die "alle CDs"-Tabelle sieht, soll man außerdem sich nur CDs bestimmter Kategorien anzeigen lassen können (also zB soll man die gewünschte Kategorie per DropDown-Feld wählen können. (zweitrangiges Problem)

Tut mir leid, dass ich mich so unklar ausgedrückt habe, hoffe es ist jetzt klarer.

Wenn möglich würde ich die clientseitige Transformation vorziehen, da mein Webspace leider kein php unterstützt (und ich kein php kann).

Wie gesagt habe ich auch schon einmal versucht das Problem mit dieser Grundlage zu lösen: http://forum.de.selfhtml.org/archiv/2005/1/t97848/#m597247

also hier der Quelltext davon, vielleicht hilfts ja:

cds2.xml:


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet href="cds2.xsl" type="text/xsl" ?>
<cdliste>
 <cd>
  <cd_id>01</cd_id>
  <name>Bravo Hits 1000</name>
  <art>Sampler</art>
  <kategorie>POP</kategorie>
  <jahr>2005</jahr>
  <preis>50 EUR</preis>
  <label>soundso</label>
  <beschreibung>Ein ganz tolles Teil mit vielen tollen Liedern...</beschreibung>
  <detail id="1">
   <detailname>Motiv:</detailname>
   <detailwert>bla</detailwert>
  </detail>
  <detail id="2">
   <detailname>Anzahl der CDs:</detailname>
   <detailwert>5</detailwert>
  </detail>
  <detail id="3">
   <detailname>Anz Lieder:</detailname>
   <detailwert>100</detailwert>
  </detail>
  <thumb>../images/bravo_hits_1000_t.jpg</thumb>
  <bild id="1">../images/bravo_hits_1000_1.jpg</bild>
  <bild id="2">../images/bravo_hits_1000_2.jpg</bild>
 </cd>

 <cd>
   <cd_id>02</cd_id>
   <name>Viva Best Of 2010</name>
  <art>Sampler</art>
  <kategorie>POP</kategorie>
  <jahr>2010</jahr>
  <preis>170 EUR</preis>
  <label>noch ein tolles Label</label>
  <beschreibung>die besten hits des Jahres auf nur 4 CDs.</beschreibung>
  <detail id="1">
   <detailname>Anzahl der CDs:</detailname>
   <detailwert>4</detailwert>
  </detail>
  <thumb>../images/viva_best_of_2010_t.jpg</thumb>
  <bild id="1">../images/viva_best_of_2010_1.jpg</bild>
 </cd>
</cdliste>

cds2.xsl:


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
 <xsl:param name="cdid" />

 <xsl:template match="/">
  <html>
   <head>
    <script language="JavaScript" type="text/javascript">
     /* Fے DEN IE  */
     var objSrcTree, ObjXSLT, objCache;

     /* Fے MOZILLA */
     var xslStylesheet;
     var xsltProcessor = (window.ChromeWindow) ? new XSLTProcessor() : "";
     var myDOM;
     var xmlDoc;

     function init()
     {
      if (window.ActiveXObject)
      {
       objSrcTree = new ActiveXObject('MSXML2.DOMDocument.4.0');
       objSrcTree.async = false;
       objSrcTree.load('cds2.xml');

       objXSLT=new ActiveXObject('MSXML2.FreeThreadedDOMDocument.4.0');
       objXSLT.async = false;
       objXSLT.load('cds2.xsl');

       objCache   = new ActiveXObject("Msxml2.XSLTemplate.4.0");
       objCache.stylesheet = objXSLT;

       //output.innerHTML = "";
      }
      else if (window.ChromeWindow)
      {
       // load the xslt file
       var myXMLHTTPRequest = new XMLHttpRequest();
       myXMLHTTPRequest.open("GET", "cds2.xsl", false);
       myXMLHTTPRequest.send(null);

       xslStylesheet = myXMLHTTPRequest.responseXML;
       xsltProcessor.importStylesheet(xslStylesheet);

       // load the xml file
       myXMLHTTPRequest = new XMLHttpRequest();
       myXMLHTTPRequest.open("GET", "cds2.xml", false);
       myXMLHTTPRequest.send(null);

       xmlDoc = myXMLHTTPRequest.responseXML;

       //document.getElementById("output").innerHTML = "";
      }
      else
       alert("Ihr Browser unterst�eine XML-XSL-Transformation");
     }

     function show(nAbstrakt)
     {
      if (window.ActiveXObject)
      {
       var objXSLTProc = objCache.createProcessor();
       objXSLTProc.input = objSrcTree;
       objXSLTProc.addParameter("cdid", nAbstrakt, "");
       objXSLTProc.transform();
       output.innerHTML = objXSLTProc.output;
      }
      else if (window.ChromeWindow)
      {
       var myParam = xsltProcessor.getParameter(null, "cdid");
       xsltProcessor.setParameter(null, "cdid", nAbstrakt);

       var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
       myDOM = fragment;
       document.getElementById("output").innerHTML = "";
       document.getElementById("output").appendChild(fragment);
      }
     }
    </script>
    <title>CD Uebersicht</title>
    <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%; display:inline; padding-left:5px; }
     p { font-size:11px; letter-spacing:1px; line-height:160%; display:inline; padding-left:8px; text-align:justify; }
    </style>
   </head>
   <body onload="init();" bgcolor="#FFFFFF">
    <xsl:choose>
     <xsl:when test="$cdid != ''">
      <xsl:apply-templates select="cdliste/cd[cd_id = $cdid]" />
     </xsl:when>
     <xsl:otherwise>
      <xsl:apply-templates select="cdliste" mode="alle" />
     </xsl:otherwise>
    </xsl:choose>
   </body>
  </html>
 </xsl:template>

 <xsl:template match="cdliste" mode="aktuelle">
  <div id="output">
   <center>
    <h1>A k t u e l l e - C D s</h1>
    <table width="600" border="0" cellpadding="0" cellspacing="0">
     <colgroup>
      <col width="25%" />
      <col width="25%" />
      <col width="25%" />
      <col width="25%" />
     </colgroup>
     <xsl:for-each select="cd[jahr='2006']">
     <xsl:sort select="jahr" order="descending" />
     <tr>
      <td colspan="4"><h2><a href="javascript:show('{cd_id}')"><xsl:value-of select="name"/></a></h2></td>
     </tr>
     <tr>
      <td rowspan="2"><a href="javascript:show('{cd_id}')"><img border="0"><xsl:attribute name="src"><xsl:value-of select="thumb"/></xsl:attribute></img></a></td>
      <td><p><b>JAHR</b></p></td>
      <td><p><b>PREIS</b></p></td>
      <td><p><b>LABEL</b></p></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>
     <tr>
      <td colspan="4" height="20"></td>
     </tr>
     </xsl:for-each>
    </table>
    <h2><a href="javascript:show(' ??? ')">Alle CDs anzeigen</a></h2>
   </center>
  </div>
 </xsl:template>

 <xsl:template match="cdliste" mode="alle">
  <div id="output">
   <center>
    <h1>A l l e - C D s</h1>
    <table width="600" border="0" cellpadding="0" cellspacing="0">
     <colgroup>
      <col width="25%" />
      <col width="25%" />
      <col width="25%" />
      <col width="25%" />
     </colgroup>
     <xsl:for-each select="cd">
     <xsl:sort select="jahr" order="descending" />
     <tr>
      <td colspan="5"><h2><a href="javascript:show('{cd_id}')"><xsl:value-of select="name"/></a></h2></td>
     </tr>
     <tr>
      <td rowspan="2"><a href="javascript:show('{cd_id}')"><img border="0"><xsl:attribute name="src"><xsl:value-of select="thumb"/></xsl:attribute></img></a></td>
      <td><p><b>JAHR</b></p></td>
      <td><p><b>PREIS</b></p></td>
      <td><p><b>LABEL</b></p></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>
     <tr>
      <td colspan="4" height="20"></td>
     </tr>
     </xsl:for-each>
    </table>
   </center>
  </div>
 </xsl:template>

 <xsl:template match="cd">
  <div id="output">
   <center>
    <h1><xsl:value-of select="name"/></h1>
    <table width="600" border="0" cellpadding="0" cellspacing="0">
     <colgroup>
      <col width="200" />
      <col width="200" />
      <col width="200" />
     </colgroup>
     <tr>
      <td colspan="2" align="left"><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"></td>
     </tr>
     <tr>
      <td valign="middle">
       <h2>Beschreibung:</h2><br/>
       <p><xsl:value-of select="beschreibung"/></p>
      </td>
      <td colspan="2" align="right"><img><xsl:attribute name="src"><xsl:value-of select="bild[@id='2']"/></xsl:attribute></img></td>
     </tr>
     <tr>
      <td colspan="3" height="20"></td>
     </tr>
     <tr>
      <td colspan="2" align="left"><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>
      <td colspan="2" align="right"><img><xsl:attribute name="src"><xsl:value-of select="bild[@id='4']"/></xsl:attribute></img></td>
     </tr>
    </table>
    <a href="javascript:location.reload()"><h2><u>ZURÜCK</u></h2></a>
   </center>
  </div>
 </xsl:template>

</xsl:stylesheet>

danke für eure Antworten und Mühen,

Christoph

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Christoph K: Tabelle mit verschiedenen Ansichten

Beitrag lesen

Tabelle mit verschiedenen Ansichten

Tabelle mit verschiedenen Ansichten