XSLT设置表背景颜色时

时间:2016-12-18 14:21:42

标签: xml xslt

我有点卡住了。我想让我的XSLT文件在以下情况下设置表格中行的背景颜色:

  

origin = USA到#4286f4

     

origin = UK to#ed3d3d

     

origin = CS到#3dd2ed

     

origin = NOR到#000c7a

我几乎尝试了一切,但我无法让它发挥作用......有人可以帮我一点吗?

这是我的XML:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="XSLTproject.xsl"?>
<computers>
  <computer origin="USA" type="xs:string">
    <name>Commodore SuperPET/SP9000</name>
    <country>USA</country>
    <year>1979</year>
    <usage>School</usage>
    <picture>http://www.computermuseum.li/Testpage/CommodoreSuperPetSP9000.jpg</picture>
  </computer>
  <computer origin="UK" type="xs:string">
    <name>BBC Micro</name>
    <country>UK</country>
    <year>1981</year>
    <usage>School</usage>
    <picture>http://ichef.bbci.co.uk/news/624/cpsprodpb/1545A/production/_84103178_e9af0224-37f1-4028-86d3-6be1d7d5b283.jpg</picture>
  </computer>
  <computer origin="UK" type="xs:string">
    <name>Acorn Archimedes</name>
    <country>UK</country>
    <year>1987</year>
    <usage>School</usage>
    <picture>https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/AcornArchimedes-Wiki.jpg/300px-AcornArchimedes-Wiki.jpg</picture>
  </computer>
  <computer origin="CS" type="xs:string">
    <name>IQ 151</name>
    <country>Czechoslovakia</country>
    <year>1985</year>
    <usage>School</usage>
    <picture>http://www.old-computers.com/museum/photos/zpa_iq151_System_s1.jpg</picture>
  </computer>
  <computer origin="NOR" type="xs:string">
    <name>Tiki 100</name>
    <country>Norway</country>
    <year>1984</year>
    <usage>School</usage>
    <picture>http://www.old-computers.com/museum/photos/Tiki_100_System_1.jpg</picture>
  </computer>
  <computer origin="UK" type="xs:string">
    <name>MK14</name>
    <country>UK</country>
    <year>1977</year>
    <usage>Hobby</usage>
    <picture>http://retrothing.typepad.com/.a/6a00d83452989a69e2013484b0f714970c-pi</picture>
  </computer>
  <computer origin="UK" type="xs:string">
    <name>Apricot F1</name>
    <country>UK</country>
    <year>1984</year>
    <usage>Home</usage>
    <picture>http://www.old-computers.com/museum/photos/act_apricot-f1_1.jpg</picture>
  </computer>
  <computer origin="USA" type="xs:string">
    <name>Apple II Plus</name>
    <country>USA</country>
    <year>1979</year>
    <usage>Home</usage>
    <picture>http://apple2history.org/wp-content/uploads/2008/12/a2plusandmonitor3.jpg</picture>
  </computer>
  <computer origin="USA" type="xs:string">
    <name>Atari TT</name>
    <country>USA</country>
    <year>1990</year>
    <usage>Home</usage>
    <picture>http://i.ebayimg.com/00/s/MTIwMFgxNjAw/z/dJkAAOSwkNZUfsPV/$_1.JPG</picture>
  </computer>
  <computer origin="USA" type="xs:string">
    <name>Apple IIc Plus</name>
    <country>USA</country>
    <year>1988</year>
    <usage>Home</usage>
    <picture>https://i.ytimg.com/vi/LKOaNpXDcQk/maxresdefault.jpg</picture>
  </computer>
</computers>

和XSLT:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
    <h2>oldies!</h2>
    <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:center">Name</th>
      <th style="text-align:center">Country</th>
      <th style="text-align:center">Year</th>
      <th style="text-align:center">Usage</th>
      <th style="text-align:center">Picture</th>
    </tr>
    <xsl:for-each select="computers/computer">
    <tr>
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="country"/></td>
      <td><xsl:value-of select="year"/></td>
      <td><xsl:value-of select="usage"/></td>
      <td><img width="400" height="400" src="{picture}"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

2 个答案:

答案 0 :(得分:0)

您可以使用xsl:choose元素。它可以在多个备选项中选择一个值,具体取决于test属性。在您的示例中,测试只是可以将country元素的内容与字符串进行比较,以确定所需的颜色:

<xsl:for-each select="computers/computer">
  <tr>
    <xsl:attribute name="bgcolor">
      <xsl:choose>
        <xsl:when test="country = 'USA'">#4286f4</xsl:when>
        <xsl:when test="country = 'UK'">#ed3d3d</xsl:when>
        <xsl:when test="country = 'Czechoslovakia'">#3dd2ed</xsl:when>
        <xsl:when test="country = 'Norway'">#000c7a</xsl:when>
        <xsl:otherwise>#ffffff</xsl:otherwise>
      </xsl:choose>
    </xsl:attribute>
    <td><xsl:value-of select="name"/></td>
    <td><xsl:value-of select="country"/></td>
    <td><xsl:value-of select="year"/></td>
    <td><xsl:value-of select="usage"/></td>
    <td><img width="400" height="400" src="{picture}"/></td>
  </tr>
</xsl:for-each>

答案 1 :(得分:0)

一种可能的解决方案是创建第三个XML文件,其中包含所需的转换(trans.xml),其中包含从国家/地区代码到HTML颜色代码的必要转换:

<?xml version="1.0" encoding="UTF-8"?>
<bgcolor>
  <color origin="USA">#4286f4</color>
  <color origin="UK">#ed3d3d</color>
  <color origin="CS">#3dd2ed</color>
  <color origin="NOR">#000c7a</color>
</bgcolor>

使用名称为trans.xml的第三个XML文件,使用如下的XSLT文件

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:variable name="colors" select="document('trans.xml')/bgcolor" />

    <xsl:template match="/">
        <html>
            <body>
                <h2>oldies!</h2>
                <table border="1">
                    <tr bgcolor="">
                        <th style="text-align:center">Name</th>
                        <th style="text-align:center">Country</th>
                        <th style="text-align:center">Year</th>
                        <th style="text-align:center">Usage</th>
                        <th style="text-align:center">Picture</th>
                    </tr>
                    <xsl:for-each select="computers/computer">
                        <xsl:variable name="curColor" select="@origin" />
                        <tr bgcolor="{$colors/color[@origin=$curColor]/text()}">
                            <td>
                              <xsl:value-of select="name"/></td>
                            <td>
                              <xsl:value-of select="country"/></td>
                            <td>
                              <xsl:value-of select="year"/></td>
                            <td>
                              <xsl:value-of select="usage"/></td>
                            <td>
                              <img width="400" height="400" src="{picture}"/>

                                                                                                                      

会给你想要的结果。