From the following xml data:
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="kandidaten.xsl" type="text/xsl"?>
<auswertung>
<kandidat>
<name>Peter</name>
<punkte>67</punkte>
</kandidat>
<kandidat>
<name>Karl</name>
<punkte>87</punkte>
</kandidat>
<kandidat>
<name>Anita</name>
<punkte>36</punkte>
</kandidat>
<kandidat>
<name>Rosi</name>
<punkte>67</punkte>
</kandidat>
<kandidat>
<name>Heiner</name>
<punkte>50</punkte>
</kandidat>
<kandidat>
<name>Paul</name>
<punkte>45</punkte>
</kandidat>
</auswertung>
I want to create the following output with xslt:
To this end I wrote the following xslt code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs"
version="2.0">
<xsl:template match="auswertung">
<html>
<head>
<title>Kandidaten</title>
</head>
<body>
<h1>Kandidaten und ihre Punkte</h1>
<hr/>
<table>
<xsl:apply-templates select="kandidat">
<xsl:sort select="punkte" order="descending"></xsl:sort>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="kandidat">
<tr>
<td>
<xsl:value-of select="name/text()"/>
</td>
<!-- second columns of table is supposed to contain the -->
<!-- points ("punkte") of the respective candidate ("kandidat") -->
<td>
<!-- second column contains a paragraph whose background-color is blue -->
<p bgcolor="#0000ff">
<xsl:call-template name="create_empty_space">
<xsl:with-param name="count" select="punkte/text()"/>
<xsl:with-param name="number" select="punkte/text()"/>
</xsl:call-template>
</p>
</td>
</tr>
</xsl:template>
<xsl:template name="create_empty_space">
<xsl:param name="count"/>
<xsl:param name="number"/>
<!-- print number (points achieved by candidate) in the middle of the beam -->
<xsl:if test="$count = round($number div 2)">
<font color="#ffff00">
<xsl:value-of select="$number"/>
</font>
</xsl:if>
<xsl:if test="$count > 0">
<!-- amount of empty space created is supposed to depend on the number of -->
<!--points, therefore function "create_empty_space" is called recursively-->
<!-- depending on the number of points -->
<!--... example: if points==20, function is called 20 times -->
<xsl:text> </xsl:text>
<xsl:call-template name="create_empty_space">
<xsl:with-param name="count" select="$count - 1"/>
<xsl:with-param name="number" select="$number"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
When I run the code, all beams have the same size, though.
How can I make the length of the beams correspond to the number of points of the respective candidate?
Since you're using xml-stylesheet in your XML input, I doubt you're really using a 2.0 processor.
Like Martin suggested, the first items width should be 100% and the width of the remaining items should be computed based on the first (max).
Here's a modified version of your XSLT...
XSLT 1.0
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*"/>
<!--This is easier in XSLT 2.0:
<xsl:variable name="maxPoints" select="max(/*/kandidat/punkte)"/>
-->
<xsl:variable name="maxPoints">
<xsl:for-each select="/*/kandidat">
<xsl:sort select="punkte" order="descending"/>
<xsl:if test="position() = 1">
<xsl:value-of select="punkte"/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:template match="auswertung">
<html>
<head>
<title>Kandidaten</title>
</head>
<body>
<h1>Kandidaten und ihre Punkte</h1>
<hr/>
<table style="width: 100%">
<xsl:apply-templates select="kandidat">
<xsl:sort select="punkte" order="descending"/>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="kandidat">
<tr>
<td style="width: 1%">
<xsl:value-of select="name"/>
</td>
<!-- second columns of table is supposed to contain the -->
<!-- points ("punkte") of the respective candidate ("kandidat") -->
<td>
<!-- second column contains a paragraph whose background-color is blue -->
<div style="text-align: center;width: {round(punkte div $maxPoints * 100)}%;color: #ffff00;background-color: #0000ff;">
<xsl:value-of select="punkte"/>
</div>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
Output
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kandidaten</title>
</head>
<body>
<h1>Kandidaten und ihre Punkte</h1>
<hr>
<table style="width: 100%">
<tr>
<td style="width: 1%">Karl</td>
<td>
<div style="text-align: center;width: 100%;color: #ffff00;background-color: #0000ff;">87</div>
</td>
</tr>
<tr>
<td style="width: 1%">Peter</td>
<td>
<div style="text-align: center;width: 77%;color: #ffff00;background-color: #0000ff;">67</div>
</td>
</tr>
<tr>
<td style="width: 1%">Rosi</td>
<td>
<div style="text-align: center;width: 77%;color: #ffff00;background-color: #0000ff;">67</div>
</td>
</tr>
<tr>
<td style="width: 1%">Heiner</td>
<td>
<div style="text-align: center;width: 57%;color: #ffff00;background-color: #0000ff;">50</div>
</td>
</tr>
<tr>
<td style="width: 1%">Paul</td>
<td>
<div style="text-align: center;width: 52%;color: #ffff00;background-color: #0000ff;">45</div>
</td>
</tr>
<tr>
<td style="width: 1%">Anita</td>
<td>
<div style="text-align: center;width: 41%;color: #ffff00;background-color: #0000ff;">36</div>
</td>
</tr>
</table>
</body>
</html>
EDIT: You could also clean up your stylesheet and output a little by using CSS classes...
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*"/>
<!--This is easier in XSLT 2.0:
<xsl:variable name="maxPoints" select="max(/*/kandidat/punkte)"/>
-->
<xsl:variable name="maxPoints">
<xsl:for-each select="/*/kandidat">
<xsl:sort select="punkte" order="descending"/>
<xsl:if test="position() = 1">
<xsl:value-of select="punkte"/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:template match="auswertung">
<html>
<head>
<title>Kandidaten</title>
<style type="text/css">
.name {
width: 10%;
}
.punkte {
text-align: center;
color: #ffff00;
background-color: #0000ff;
}
table.kandidat {
width: 100%;
}
</style>
</head>
<body>
<h1>Kandidaten und ihre Punkte</h1>
<hr/>
<table class="kandidat">
<xsl:apply-templates select="kandidat">
<xsl:sort select="punkte" order="descending"/>
</xsl:apply-templates>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="kandidat">
<tr>
<td class="name">
<xsl:value-of select="name"/>
</td>
<td>
<div style="width: {round(punkte div $maxPoints * 100)}%;"
class="punkte">
<xsl:value-of select="punkte"/>
</div>
</td>
</tr>
</xsl:template>
Related
When viewing the XML file (congress.xml) in my browser, the drawCells template in election.xsl doesn't seem to be generating the proper visual elements. There is supposed to be a bar graph generated but it is not.
Open congress.xml in a browser. Open elections.xsl in a text editor.
The files are...
congress.xml
election.xsl
candidates.xml
vwstyles.css
vwlogo.png
Here is a google drive link to the all the files...
https://drive.google.com/folderview?id=0B9o30hEqwvyDc2Y3MktHNDQydnc&usp=sharing
Here is an image of what is supposed to be happening...
vw.jpg
If you think you can see why this is not happening by looking at the election.xsl stylesheet itelself, here it is...
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
doctype-system="about:legacy-compat"
encoding="UTF-8"
indent="yes" />
<xsl:variable name="candidateInfo" select="document('candidates.xml')/candidates/candidate[#candidateID]" />
<xsl:template match="/">
<html>
<head>
<title>Minnesota Congressional Election Results</title>
<link href="vwstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<header>
<img src="vwlogo.png" alt="Voter Web" />
</header>
<h1>Minnesota Congressional Election Results</h1>
<section id="votingResults">
<xsl:apply-templates select="congressResults/district" />
</section>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="district">
<h2>District <xsl:value-of select="#dNumber" /></h2>
<table class="electionTable">
<thead>
<tr>
<th>Candidate</th>
<th>Votes</th>
</tr>
</thead>
<tbody>
<xsl:apply-templates select="candidates/candidate" />
</tbody>
</table>
</xsl:template>
<xsl:template match="candidate">
<tr>
<xsl:variable name="candidateVotes" select="sum(votes)" />
<xsl:variable name="totalVotes" select="sum(..//votes)" />
<xsl:variable name="candidatePercent" select="($candidateVotes) div ($totalVotes)" />
<xsl:variable name="candidateName" select="$candidateInfo[#candidateID=current()/#candidateID]/name" />
<xsl:variable name="candidateParty" select="$candidateInfo[#candidateID=current()/#candidateID]/party" />
<th>
<xsl:value-of select="$candidateName" />
(<xsl:value-of select="$candidateParty" />)
</th>
<th>
<xsl:value-of select="format-number($candidateVotes, '###,##0')" />
(<xsl:value-of select="format-number($candidatePercent, '#0.0%')" />)
</th>
<td>
<xsl:call-template name="drawCells">
<xsl:with-param name="cellCount" select="round(100 * $candidatePercent)"/>
<xsl:with-param name="party" select="$candidateParty" />
</xsl:call-template>
</td>
</tr>
</xsl:template>
<xsl:template name="drawCells">
<xsl:param name="cellCount" />
<xsl:param name="party" />
<xsl:if test="$cellCount > 0">
<td class="{$party}"></td>
<xsl:call-template name="drawCells">
<xsl:with-param name="cellCount" select="$cellCount - 1" />
<xsl:with-param name="party" select="$party" />
</xsl:call-template>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
You wrap the call to drawCells in an own td element, therefore nesting the tds:
<td>
<xsl:call-template name="drawCells">...</<xsl:call-template>
</td>
Instead simply do
<xsl:call-template name="drawCells">...</<xsl:call-template>
At least this fixes the output in Firefox.
I have a XSLT file which displays a XML file into a HTML page. There are three tables, I want the data which is greater than -2 under the maxtemp column to have a green text-color. I tried the <xsl:when>, but it does not work. Can anybody kindly help me with this?
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="weatherdata.xsl"?>
<weatherdata>
<stationdata weatherdate="2015-1-1" location="Calgary">
<maxtemp>1.1°C</maxtemp>
<mintemp>-6.1°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-1-2" location="Calgary">
<maxtemp>-3.4°C</maxtemp>
<mintemp>-18.2°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>5cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-1-3" location="Calgary">
<maxtemp>-18.1°C</maxtemp>
<mintemp>-21.1°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>1.6cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-01" location="Charlottetown">
<maxtemp>-3.5°C</maxtemp>
<mintemp>-15°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0.4cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-02" location="Charlottetown">
<maxtemp>-1°C</maxtemp>
<mintemp>-13.2°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0.6cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-03" location="Charlottetown">
<maxtemp>-11.8°C</maxtemp>
<mintemp>-16.1°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-01" location="Ottawa">
<maxtemp>-3°C</maxtemp>
<mintemp>-8.1°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0.2cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-02" location="Ottawa">
<maxtemp>-3.8°C</maxtemp>
<mintemp>-15.8°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>0cm</totalsnow>
</stationdata>
<stationdata weatherdate="2015-01-03" location="Ottawa">
<maxtemp>-9.6°C</maxtemp>
<mintemp>-15.5°C</mintemp>
<totalrain>0 mm</totalrain>
<totalsnow>18cm</totalsnow>
</stationdata>
</weatherdata>
This is my XSL:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:variable name="thead">
<tr>
<th>Data</th>
<th>Maximum Temperature(°C)</th>
<th>Minimum Temperature(°C)</th>
<th>Total Rain(mm)</th>
<th>Total Snow(cm)</th>
</tr>
</xsl:variable>
<xsl:template match="weatherdata">
<html align="center">
<head>
<title>weather data</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
th{
background-color:green;
}
</style>
</head>
<body>
<ul align="left" id="top">
<li>Calgary Weather</li>
<li>Charlottetown Weather</li>
<li>Ottawa Weather</li>
</ul>
<h1 id="Calgary">Calgary – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Calgary']"/>
</table>
Back To Top
<h1 id="Charlottetown">Charlottetown – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Charlottetown']"/>
</table>
Back To Top
<h1 id="Ottawa">Ottawa – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Ottawa']"/>
</table>
Back To Top
</body>
</html>
</xsl:template>
<xsl:template match="stationdata">
<tr>
<td><xsl:value-of select="#weatherdate"/></td>
<xsl:choose>
<xsl:when test="maxtemp >'10'">
<td color="yellow">
<xsl:value-of select="maxtemp"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="maxtemp"/></td>
</xsl:otherwise>
</xsl:choose>
<td> <xsl:value-of select="mintemp"/></td>
<td><xsl:value-of select="totalrain"/></td>
<td><xsl:value-of select="totalsnow"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
I fixed your XML above because it wasn't well-formed. Concerning the problem of the comparison of maxtemp:
<xsl:when test="maxtemp >'10'">
did compare -4.2°C, a string, to -2.0, a number. Which always evaluates to false. So remove the °C first and then compare the numbers. I also added a class to the CSS part to color it green.
<xsl:when test="substring-before(maxtemp, '°C') > -2.0">
<td class="Warmer">
...
Here is the complete XSLT
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:variable name="thead">
<tr>
<th>Data</th>
<th>Maximum Temperature(°C)</th>
<th>Minimum Temperature(°C)</th>
<th>Total Rain(mm)</th>
<th>Total Snow(cm)</th>
</tr>
</xsl:variable>
<xsl:template match="weatherdata">
<html align="center">
<head>
<title>weather data</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
th{
background-color:green;
}
.Warmer { background-color: GreenYellow; }
</style>
</head>
<body>
<ul align="left" id="top">
<li>Calgary Weather</li>
<li>Charlottetown Weather</li>
<li>Ottawa Weather</li>
</ul>
<h1 id="Calgary">Calgary – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Calgary']"/>
</table>
Back To Top
<h1 id="Charlottetown">Charlottetown – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Charlottetown']"/>
</table>
Back To Top
<h1 id="Ottawa">Ottawa – Meteorological Data (2015)</h1>
<table border="1" align="center">
<xsl:copy-of select="$thead"/>
<xsl:apply-templates select="stationdata[#location='Ottawa']"/>
</table>
Back To Top
</body>
</html>
</xsl:template>
<xsl:template match="stationdata">
<tr>
<td><xsl:value-of select="#weatherdate"/></td>
<xsl:choose>
<xsl:when test="substring-before(maxtemp, '°C') > -2.0">
<td class="Warmer">
<xsl:value-of select="maxtemp"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="maxtemp"/></td>
</xsl:otherwise>
</xsl:choose>
<td> <xsl:value-of select="mintemp"/></td>
<td><xsl:value-of select="totalrain"/></td>
<td><xsl:value-of select="totalsnow"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
I want to output the names, domain and usage of a database where its version is equal to 20i. I have created a stylesheet that does this - when I load my xml, it detects that I have an element matching my requirements in the table, but doesn't actually show them. No idea what I'm doing wrong!
XML:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="xrt.xsl"?>
<Inventory>
<DatabaseName>
<GlobalName>Tom</GlobalName>
<Function>production</Function>
<Domain>tom.info</Domain>
<Administrator EmailAlias="xrichards" Extension="221">Xavier Richards</Administrator>
<Attributes Type="Production" Version="20ix"/>
<Comments>
...
</Comments>
<Usage>
500
</Usage>
</DatabaseName>
<DatabaseName>
<GlobalName>Ricardo</GlobalName>
<Function>production</Function>
<Domain>tom.info</Domain>
<Administrator EmailAlias="xrichards" Extension="221">Xavier Richards</Administrator>
<Attributes Type="Production" Version="20i"/>
<Comments>
...
</Comments>
<Usage>
500
</Usage>
</DatabaseName>
<WebserverName>
<GlobalName>Jim</GlobalName>
<Function>distribution</Function>
<Domain>jim1235.com</Domain>
<Administrator EmailAlias="rkarvani" Extension="134237">Richard Karvani</Administrator>
<Administrator EmailAlias="stones" Extension="222237">Steve Jones</Administrator>
<Attributes Type="Production" Version="20i"/>
<Comments>
...
</Comments>
<Usage>
1200
</Usage>
</WebserverName>
</Inventory>
XSLT Document:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h1>My Server List</h1>
<h2>Database Servers</h2>
<xsl:apply-templates select="Inventory/DatabaseName" />
<h2>Webservers</h2>
<xsl:apply-templates select="Inventory/WebserverName" />
</body>
</html>
</xsl:template>
<xsl:template match="DatabaseName">
<table border="1">
<tr>
<th>Name</th>
<th>Domain</th>
<th>Usage</th>
</tr>
<xsl:for-each select="Attributes[#Version='20i']">
<tr>
<td><xsl:value-of select="GlobalName"/></td>
<td><xsl:value-of select="Domain"/></td>
<td><xsl:value-of select="Usage"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
<xsl:template match="WebserverName">
<table border="1">
<tr>
<th>Name</th>
<th>Domain</th>
<th>Usage</th>
</tr>
<xsl:for-each select="Attributes[#Version='20i']">
<tr>
<td><xsl:value-of select="GlobalName"/></td>
<td><xsl:value-of select="Domain"/></td>
<td><xsl:value-of select="Usage"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
I think you want to put the condition about that version into the apply-templates and move the table creation to the another template:
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h1>My Server List</h1>
<h2>Database Servers</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Domain</th>
<th>Usage</th>
</tr>
<xsl:apply-templates select="Inventory/DatabaseName[Attributes[#Version='20i']]" />
</table>
<h2>Webservers</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Domain</th>
<th>Usage</th>
</tr>
<xsl:apply-templates select="Inventory/WebserverName[Attributes[#Version='20i']]" />
</table>
</body>
</html>
</xsl:template>
<xsl:template match="DatabaseName">
<tr>
<td><xsl:value-of select="GlobalName"/></td>
<td><xsl:value-of select="Domain"/></td>
<td><xsl:value-of select="Usage"/></td>
</tr>
</xsl:template>
<xsl:template match="WebserverName">
<tr>
<td><xsl:value-of select="GlobalName"/></td>
<td><xsl:value-of select="Domain"/></td>
<td><xsl:value-of select="Usage"/></td>
</tr>
</xsl:template>
</xsl:stylesheet>
I would like to have the following XML:
<?xml version="1.0" standalone="yes"?>
<NewDataSet>
<categories>
<name>Badges & Holders</name>
<value>1000111</value>
</categories>
<categories>
<name>Clips, Tacks & Rubber Bands</name>
<value>1000113</value>
</categories>
<categories>
<name>Clocks</name>
<value>1000114</value>
</categories>
<categories>
<name>Indexing Flags & Tabs</name>
<value>1000115</value>
</categories>
<categories>
<name>Magnification</name>
<value>1000116</value>
</categories>
<categories>
<name>Pad Holders</name>
<value>1000117</value>
</categories>
<categories>
<name>Paper Punch Accessories</name>
<value>1000118</value>
</categories>
<categories>
<name>Paper Punches</name>
<value>1000119</value>
</categories>
<categories>
<name>Scissors, Rulers & Paper Trimmers</name>
<value>1000120</value>
</categories>
<categories>
<name>Signs & Nameplates</name>
<value>1000121</value>
</categories>
<categories>
<name>Stamps & Pads Accessories</name>
<value>1000122</value>
</categories>
<categories>
<name>Stapler Accessories</name>
<value>1000123</value>
</categories>
<categories>
<name>Staplers</name>
<value>1000124</value>
</categories>
<categories>
<name>Tags & Tickets</name>
<value>1000125</value>
</categories>
<categories>
<name>Tape, Glue & Adhesives</name>
<value>1000126</value>
</categories>
</NewDataSet>
And turn it into HTML (table) like this:
<table>
<tr>
<td>
<div>
<img src="Path/" + {value} + ".jpg"></img>
</div>
<div>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name"/>
</span>
</div>
</td>
</tr>
</table>
Here is the kicker, though. I only need it to have 5 columns of TD's and then start over with a new TR after that.. all the way down. If it has, say, 12 items in the XML, then I need it to go ahead and have 15 TD's (I presume) so that the table is a nice square.
In the future we will have a "PictureURL" or something like that in this XML for each "categories" item just like the name and value. I could get that working later on my own, I bet, if I can get this working now.
Thank you very much for any help! The XSLT syntax has me still confused after a few days of trying this and googling around.
Here is what I have been trying to make work and could not pull it off:
<table>
<xsl:for-each select="categories[position() mod 5 = 1]">
<xsl:variable name="pos" select="position() - 1" />
<tr>
<td >
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5)]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 2]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 2]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 3]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 3]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 4]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 4]"/>
</span>
</td>
<td>
<xsl:value-of select="//categories[position() = ($pos * 5) + 5]"/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name[position() = ($pos * 5) + 5]"/>
</span>
</td>
</tr>
</xsl:for-each>
</table>
This is how I tried to integrate JLRishe's answer into my existing XSLT:
<!--================-->
<!-- Categories -->
<!--================-->
<xsl:template name="WriteCategories">
<xsl:if test="categories">
<div>
<!-- set the class, if browsing it's a larger font -->
<xsl:choose>
<xsl:when test="$pBrowse='True'">
<xsl:attribute name="class">critGroup lg</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="class">critGroup</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:variable name="numCols" select="5" />
<xsl:template match="/*">
<table>
<xsl:apply-templates select="categories[position() mod $numCols = 1]"
mode="row" />
</table>
</xsl:template>
<xsl:template match="categories" mode="row">
<tr>
<xsl:variable name="thisRowItems"
select=". | following-sibling::categories[position() < $numCols]" />
<xsl:apply-templates select="$thisRowItems" />
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$numCols - count($thisRowItems)" />
</xsl:call-template>
</tr>
</xsl:template>
<xsl:template match="categories">
<td>
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" />
</span>
</td>
</xsl:template>
<xsl:template name="addCells">
<xsl:param name="count" />
<xsl:if test="$count > 0">
<td></td>
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$count - 1" />
</xsl:call-template>
</xsl:if>
</xsl:template>
<div>
<!-- if not browsing, write expandable area if there are more than 5 items -->
<xsl:if test="$pBrowse='False' and count(categories)>5">
<div id="divCritHdnMore_Category" class="moreHidden">
<xsl:for-each select="categories">
<xsl:if test="position()>5">
<div>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" disable-output-escaping="yes" />
</span>
<xsl:value-of select="concat(' (', count, ')')" />
</div>
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</div>
<!-- more link -->
<xsl:if test="$pBrowse='False' and count(categories)>5">
<div class="moreLink">
<span id="spnCritMore_Category" onclick="CriteriaMore('Category')">More . . .</span>
</div>
</xsl:if>
</div>
</xsl:if>
</xsl:template>
This is how you can do table row grouping. I don't think having the right number of <td>s in the last row is strictly necessary, but I've added that capability too:
Add this to your WriteCategories template in the place where you want the table to be:
<table>
<xsl:apply-templates select="categories[position() mod $numCols = 1]"
mode="row" />
</table>
And add this outside of any other templates:
<xsl:variable name="numCols" select="5" />
<xsl:template match="categories" mode="row">
<tr>
<xsl:variable name="thisRowItems"
select=". | following-sibling::categories
[position() < $numCols]" />
<xsl:apply-templates select="$thisRowItems" />
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$numCols - count($thisRowItems)" />
</xsl:call-template>
</tr>
</xsl:template>
<xsl:template match="categories">
<td>
<xsl:value-of select="."/>
<span onclick="Critia(this, '{value}')">
<xsl:value-of select="name" />
</span>
</td>
</xsl:template>
<xsl:template name="addCells">
<xsl:param name="count" />
<xsl:if test="$count > 0">
<td></td>
<xsl:call-template name="addCells">
<xsl:with-param name="count" select="$count - 1" />
</xsl:call-template>
</xsl:if>
</xsl:template>
When run on your sample input with the last 3 categories removed to make 12 items, the result is:
<table>
<tr>
<td>
Badges & Holders
1000111
<span onclick="Critia(this, '1000111')">Badges & Holders</span></td>
<td>
Clips, Tacks & Rubber Bands
1000113
<span onclick="Critia(this, '1000113')">Clips, Tacks & Rubber Bands</span></td>
<td>
Clocks
1000114
<span onclick="Critia(this, '1000114')">Clocks</span></td>
<td>
Indexing Flags & Tabs
1000115
<span onclick="Critia(this, '1000115')">Indexing Flags & Tabs</span></td>
<td>
Magnification
1000116
<span onclick="Critia(this, '1000116')">Magnification</span></td>
</tr>
<tr>
<td>
Pad Holders
1000117
<span onclick="Critia(this, '1000117')">Pad Holders</span></td>
<td>
Paper Punch Accessories
1000118
<span onclick="Critia(this, '1000118')">Paper Punch Accessories</span></td>
<td>
Paper Punches
1000119
<span onclick="Critia(this, '1000119')">Paper Punches</span></td>
<td>
Scissors, Rulers & Paper Trimmers
1000120
<span onclick="Critia(this, '1000120')">Scissors, Rulers & Paper Trimmers</span></td>
<td>
Signs & Nameplates
1000121
<span onclick="Critia(this, '1000121')">Signs & Nameplates</span></td>
</tr>
<tr>
<td>
Stamps & Pads Accessories
1000122
<span onclick="Critia(this, '1000122')">Stamps & Pads Accessories</span></td>
<td>
Stapler Accessories
1000123
<span onclick="Critia(this, '1000123')">Stapler Accessories</span></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Okay, it's been a tough hour or so... I'm having difficulties generating table cells with different widths. I'm using XML/XSLT to spit out my HTML, so basically the widths are stored in XML format:
<size>
<width1>5</width1>
<width2>4</width2>
<width3>7</width3>
</size>
Using XSLT's attribute-set I should have a table row and cells with 5px, 4px, 7px widths respectively. However, the trouble with this is that attribute-set needs to be a child of <xsl:stylesheet> for it to work. I CAN'T do this: (forgive the missing px)
<tr>
<td>
<xsl:attribute-set name="style">
<xsl:attribute name="width"><xsl:value-of select="size/width1"/></xsl:attribute>
</xsl:attribute-set>
</td>
<td>
<xsl:attribute-set name="style">
<xsl:attribute name="width"><xsl:value-of select="size/width2"/></xsl:attribute>
</xsl:attribute-set>
</td>
<td>
<xsl:attribute-set name="style">
<xsl:attribute name="width"><xsl:value-of select="size/width3"/></xsl:attribute>
</xsl:attribute-set>
</td>
</tr>
Is there any way to generate html tag using XML data to style them?
Instead of xsl:attribute-set you need to add an xsl:attribute inside your <td> element:
<xsl:template match="size">
<tr>
<td>
<xsl:attribute name="width">
<xsl:value-of select="./width1"/>
</xsl:attribute>
</td>
<td>
<xsl:attribute name="width">
<xsl:value-of select="./width2"/>
</xsl:attribute>
</td>
<td>
<xsl:attribute name="width">
<xsl:value-of select="./width3"/>
</xsl:attribute>
</td>
</tr>
</xsl:template>
More XSLT style:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="size">
<table>
<tr>
<xsl:apply-templates/>
</tr>
</table>
</xsl:template>
<xsl:template match="size/*">
<td style="width:{.}px;">
<!-- Do stuff -->
</td>
</xsl:template>
</xsl:stylesheet>
Applied to your sample result will be:
<table>
<tr>
<td style="width:5px;"></td>
<td style="width:4px;"></td>
<td style="width:7px;"></td>
</tr>
</table>