根据数据值将CSS添加到XSL文件中

时间:2016-02-24 00:52:02

标签: css xml xslt

我有一个XSLT文件,它将XML文件显示在HTML页面中。有三个表,我希望maxtemp列下的大于-2的数据具有绿色文本颜色。我尝试了<xsl:when>,但它不起作用。有人可以帮我这个吗?

<?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>

这是我的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><a href="#Calgary">Calgary Weather</a></li>
       <li><a href="#Charlottetown">Charlottetown Weather</a></li>
       <li><a href="#Ottawa">Ottawa Weather</a></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>
            <a href="#top">Back To Top</a>

            <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>

             <a href="#top">Back To Top</a>


            <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>
             <a href="#top">Back To Top</a>
        </body>
    </html>
</xsl:template>

<xsl:template match="stationdata">
    <tr>
        <td><xsl:value-of select="@weatherdate"/></td>
                <xsl:choose>
          <xsl:when test="maxtemp &gt;'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>

1 个答案:

答案 0 :(得分:0)

我修改了你的XML,因为它没有格式良好。关于console.log

的比较问题
Meteor.call('Message',function(err,result){
    if(!err) {
        alert(result);
    } else {console.log(err);}
});

maxtemp(字符串)与<xsl:when test="maxtemp &gt;'10'"> (一个数字)进行比较。总是评估为假。因此,首先删除-4.2°C,然后比较数字。我还在CSS部分添加了-2.0以将其着色为绿色。

°C

这是完整的XSLT

class