I’m trying to create a table using XSL/XML. I’m new to XSL and XML, so go easy on me please
I’m having a bit of trouble with a few things.
This is my XML file:
<List>
<Classification>
<Class>
<Label>Milk</Label>
<NumberZone>1</NumberZone>
<Zone>
<Label>Milk1</Label>
<Frontier>500</Frontier>
</Zone>
<Zone>
<Label>Milk2</Label>
<Frontier>600</Frontier>
</Zone>
<Zone>
<Label>Milk3</Label>
<Frontier>600</Frontier>
</Zone>
<Zone>
<Label>Milk4</Label>
<Frontier>700</Frontier>
</Zone>
<image>
<File>milk.jpg</File>
</image>
</Class>
<Class>
<Label>Water</Label>
<NumberZone>2</NumberZone>
<Zone>
<Label>Water1</Label>
<Frontier>800</Frontier>
</Zone>
<Zone>
<Label>Water2</Label>
<Frontier>900</Frontier>
</Zone>
<image>
<File>water.jpg</File>
</image>
</Class>
<Class>
<Label>Juice</Label>
<NumberZone>3</NumberZone>
<Zone>
<Label>Juice1</Label>
<Frontier>950</Frontier>
</Zone>
<Zone>
<Label>Juice2</Label>
<Frontier>990</Frontier>
</Zone>
<image>
<File>juice.jpg</File>
</image>
</Class>
</Classification>
</List>
It normally is longer, but I cut out some parts.
I want my table to look like this:
- First column: Milk, Water, Juice…
- Second column: I want the images.
- Third column: Milk1, Water1, Juice1.
- Fourth column: Milk2, Water2, Juice2.
- (And so on).
So far I have this:
<table border="1">
<tr><th>Column 1</th><th>Image</th><th>Column 3</th></tr>
<xsl:for-each select="Classification/Class">
<tr>
<td><em><xsl:value-of select="Label" /></em></td>
<td>
<xsl:attribute name="src">
<xsl:value-of select="image/File"/>
</xsl:attribute>
</td>
<td><xsl:value-of select="Zone/Label"/></td>
<td colspan="1"><xsl:value-of select="Zone/Label"/></td>
<td colspan="1"><xsl:value-of select="Zone/Label"/></td>
</tr>
</xsl:for-each>
</table>
- This displays the first column perfectly with Milk, Water, and Juice.
- The second column doesn’t work, it’s just blank. The image won’t appear in the table, any idea on how to fix this?*
- The third column also works perfectly showing Milk1, Water1, Juice1.
- The fourth column doesn’t work, obviously, because I’m using the same value-of as in the third column. I don’t know how to get Milk2, Water2, and Juice2 to show in that column, since it uses the same element name (being Zone/Label)
So there’s two thing I need to fix: I need to fix the second column to actually show the image in each boxes.
I also need to fix the fourth column to show Milk2, Water2, and Juice2.
My main problem for now is to get the fourth column to work, I really don’t understand how to display Milk2, Water2, etc.
I would also like to add either radio buttons, or check boxes later on in each cell, so I could use JavaScript in my web page. I feel like each box would need a different ID, so I’m not sure how to achieve that using XSL, since it just does a “loop” through the XML file, so I’m not sure how I would add a radio button, or a check box in each cell. * This isn’t as important for now, I’ll work on that after I’d rather have help with what I mentioned before, but this would be helpful too.
EDIT:
I have two problems.
I managed to add check boxes by doing something like this:
<td colspan="1"><input type="checkbox" name="Zone1" id="Zone1" /><xsl:value-of select="Zone[1]/Label"/></td>
<td colspan="1"><input type="checkbox" name="Zone2" id="Zone1" /><xsl:value-of select="Zone[2]/Label"/></td>
<td colspan="1"><input type="checkbox" name="Zone3" id="Zone1"/> <xsl:value-of select="Zone[3]/Label"/></td>
<td colspan="1"><input type="checkbox" name="Zone4" id="Zone1" /><xsl:value-of select="Zone[4]/Label"/></td>
The problem is, I think every elements in each column will have the same ID, am I right? How do I change it so they all have a different ID?
Also, it can’t be seen from the XML file in my question, but later on there would only be, for example, Milk4. meaning I would want the cells for Water4 and Juice4 to dissapear completely, but it’s still there, empty with a check box.
For your second column, you are doing this
But this results in the following HTML
However, you really need to use the img tag to display the image, so do this instead.
As for the third and fourth columns, you can add an xpath expression to specify the position.
In fact, to avoid some code repetition, it might be better to use template matching here
And if you wanted to extend this to show your check boxes, you could do something like this
Note how this makes use of “Attribute Value Templates” to output the id. The curly braces { } indicate it is an expression to be evaluated, rather than output literally.
Here is the full XSLT
When applied to your XML, the following is output