Link to home
Start Free TrialLog in
Avatar of itortu
itortuFlag for United States of America

asked on

are there any techniques to alternate row color using xslt

Hi  I just got done with my table display and now I see that the table rows would look better if they alternate their row color. white / light grey

I have done this on asp and vbscript, but I don't know how this can b achieved using xsl transformations. any ideas?
here is a sample of my file (is quite long, i apologize for that)
<?xml version="1.0" encoding="ISO-8859-1"?>
<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:template match="/">
<xsl:apply-templates/>
</xsl:template>

<xsl:template match="myweatherpage">

    <table class="pfp">
        <xsl:apply-templates/>
    </table>
</xsl:template>

<xsl:template match="forecast">
<xsl:for-each select="//day[position() = 1]">
    <table border="0" cellspacing="0">
      <tr>
          <td class="bgrnd">
              <p class="date"><xsl:value-of select="//location/@city"/>, <xsl:value-of select="//location/@state"/><xsl:text> - </xsl:text><xsl:value-of select="date"/></p>
          </td>
      </tr>
    </table>
      
<xsl:apply-templates select="hourly"/>            
    </xsl:for-each>
        <table></table>      
</xsl:template>


<xsl:template match="hourly">
        <table border="0" cellspacing="0" width="460">
           <tr>
                <td class="forecastperiod">
                    <p class="forecastperiod">Hour by hour</p>
                </td>
            </tr>
            <tr>
                <td class="tablelabel">
                    <p class="tablelabel"><xsl:value-of select="label"/></p>
                </td>
            <table cellspacing="1" cellpadding="1" border="0" width="460">
                <tr>
                    <td class="tablelabel">Hour</td>
                    <td class="tablelabel">Temp</td>
                    <td class="tablelabel">Feels Like</td>
                    <td class="tablelabel">Winds</td>
                    <td class="tablelabel">Direction</td>
                    <td class="tablelabel">Dew Point</td>
                    <td class="tablelabel">Skies</td>
                    <td class="tablelabel">Prec</td>
                    <td class="tablelabel">Hum</td>
                </tr>
                <xsl:for-each select="hourheader/hour">
                <xsl:variable name="thisPosition" select="position()"/>
                <tr>
                <xsl:if test="$thisPosition mod 2 = 1">
                    <td class="valueof"><xsl:apply-templates select="."/></td>
                    <td class="valueofgrey"><xsl:apply-templates select="../../obs[@type='temperature']/ob[position()       = $thisPosition]"/></td>
                    <td class="valueofgrey"><xsl:apply-templates select="../../obs[@type='feelslike']/ob[position()         = $thisPosition]"/></td>
                    <td class="valueofgrey"><xsl:apply-templates select="../../obs[@type='windspeed']/ob[position()         = $thisPosition]"/></td>
                    <td class="valueof"><xsl:apply-templates select="../../obs[@type='winddirection']/icon[position()   = $thisPosition]"/></td>
                    <td class="valueofgrey"><xsl:apply-templates select="../../obs[@type='dewpoint']/ob[position()          = $thisPosition]"/></td>
                    <td class="valueof"><xsl:apply-templates select="../../obs[@type='skyconditions']/icon[position()   = $thisPosition]"/></td>
                    <td class="valueof"><xsl:apply-templates select="../../obs[@type='precipitation']/icon[position()   = $thisPosition]"/></td>
                    <td class="valueofgrey"><xsl:apply-templates select="../../obs[@type='humidity']/ob[position()          = $thisPosition]"/></td>
                </xsl:if>
                </tr>
                </xsl:for-each>
            </table>
         </tr>
     </table>
</xsl:template>


<xsl:template match="ob">
    <xsl:choose>
        <xsl:when test="@type='max'">
            <p class="tablevaluebigmax"><xsl:value-of select="."/></p>
        </xsl:when>
      <xsl:when test="@type='min'">
            <p class="tablevaluebigmin"><xsl:value-of select="."/></p>
      </xsl:when>
      <xsl:otherwise>
          <p class="tablevalue"><xsl:value-of select="."/></p>
      </xsl:otherwise>
    </xsl:choose>
</xsl:template>      


<xsl:template match="icon">
    <p class="tablevalue">
      <xsl:choose>
      <xsl:when test="@type='clearday'">
            <IMG border="0" src="icons/xhour/18x18/clearday.gif" alt="Clear skies"/>
      </xsl:when>
      <xsl:when test="@type='clearnight'">
            <IMG border="0" src="/icons/xhour/18x18/clearnight.gif" alt="Clear skies"/>
      </xsl:when>
      <xsl:when test="@type='cloudyday'">
            <IMG border="0" src="/icons/xhour/18x18/cloudyday.gif" alt="Cloudy"/>
      </xsl:when>
      <xsl:when test="@type='cloudynight'">
            <IMG border="0" src="/icons/xhour/18x18/cloudynight.gif" alt="Cloudy"/>
      </xsl:when>
      <xsl:when test="@type='mostlycloudyday'">
            <IMG border="0" src="/icons/xhour/18x18/mostlycloudyday.gif" alt="Mostly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='mostlycloudynight'">
            <IMG border="0" src="/icons/xhour/18x18/mostlycloudynight.gif" alt="Mostly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='partlycloudyday'">
            <IMG border="0" src="/icons/xhour/18x18/partlycloudyday.gif" alt="Partly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='partlycloudynight'">
            <IMG border="0" src="/icons/xhour/18x18/partlycloudynight.gif" alt="Partly cloudy"/>
      </xsl:when>
      <xsl:when test="@type='s'">
            <img src="/icons/xhour/wind/arrow_n.gif" alt="Winds from the south"/>
      </xsl:when>
      <xsl:when test="@type='sw'">
            <img  src="/icons/xhour/wind/arrow_ne.gif" alt="Winds from the southwest"/>
      </xsl:when>
      <xsl:when test="@type='w'">
            <img  src="/icons/xhour/wind/arrow_e.gif" alt="Winds from the west"/>
      </xsl:when>
      <xsl:when test="@type='nw'">
            <img  src="/icons/xhour/wind/arrow_se.gif" alt="Winds from the northwest"/>
      </xsl:when>
      <xsl:when test="@type='n'">
            <img  src="/icons/xhour/wind/arrow_s.gif" alt="Winds from the north"/>
      </xsl:when>
      <xsl:when test="@type='ne'">
            <img  src="/icons/xhour/wind/arrow_sw.gif" alt="Winds from the northeast"/>
      </xsl:when>
      <xsl:when test="@type='e'">
            <img  src="/icons/xhour/wind/arrow_w.gif" alt="Winds from the east"/>
      </xsl:when>
      <xsl:when test="@type='se'">
            <img  src="/icons/xhour/wind/arrow_nw.gif" alt="Winds from the southeast"/>
      </xsl:when>
      <xsl:when test="@type='mix'">
            <img width="16" src="/icons/xhour/precip/mix.gif" alt="Mixed precipitation expected"/>
      </xsl:when>
      <xsl:when test="@type='mixchance'">
            <img width="16" src="/icons/xhour/precip/mixchance.gif" alt="Chance of mixed precipitation"/>
      </xsl:when>
      <xsl:when test="@type='rainlikely'">
            <img width="16" src="/icons/xhour/precip/rain.gif" alt="Rain expected"/>
      </xsl:when>
      <xsl:when test="@type='rainchance'">
            <img width="16" src="/icons/xhour/precip/rainchance.gif" alt="Chance of rain"/>
      </xsl:when>
      <xsl:when test="@type='snowlikely'">
            <img width="16" src="/icons/xhour/wind/18x18/snow.gif" alt="Snow expected"/>
      </xsl:when>
      <xsl:when test="@type='snowchance'">
            <img width="16" src="/icons/xhour/wind/18x18/snowchance.gif" alt="Chance of snow"/>
      </xsl:when>
      
      </xsl:choose>
    </p>
</xsl:template>            


<xsl:template match="hour">
<xsl:if test="@show='light'">
    <p class="timeofdaylight"><xsl:value-of select="."/></p>
</xsl:if>
<xsl:if test="@show='dark'">
    <p class="timeofdaynight"><xsl:value-of select="."/></p>
</xsl:if>
</xsl:template>            

</xsl:stylesheet>




thank you much.

itortu.
ASKER CERTIFIED SOLUTION
Avatar of Gertone (Geert Bormans)
Gertone (Geert Bormans)
Flag of Belgium image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of itortu

ASKER

correct me if I follow your instructions wrongly, but it seems that the code you suggested, is not working.
 
this is the table after new code:

            <table cellspacing="1" cellpadding="1" border="0" width="460">
                <tr>
                    <td class="tablelabel">Hour</td>
                    <td class="tablelabel">Temp</td>
                    <td class="tablelabel">Feels Like</td>
                    <td class="tablelabel">Winds</td>
                    <td class="tablelabel">Direction</td>
                    <td class="tablelabel">Dew Point</td>
                    <td class="tablelabel">Skies</td>
                    <td class="tablelabel">Prec</td>
                    <td class="tablelabel">Hum</td>
                </tr>
               
                <xsl:for-each select="hourheader/hour">
                <xsl:variable name="thisPosition" select="position()"/>
               
                <xsl:if test="$thisPosition mod 2 = 1">
                <tr>
                <xsl:choose>
                <xsl:when test="$thisPosition mod 4 = 1"><!-- only 1 and 3 pass the first test -->
                    <xsl:attribute name="bgcolor">white</xsl:attribute>
                </xsl:when>
                <xsl:otherwise>
                    <xsl:attribute name="bgcolor">black</xsl:attribute>
                </xsl:otherwise>
                </xsl:choose>
                    <td><xsl:apply-templates select="."/></td>
                    <td><xsl:apply-templates select="../../obs[@type='temperature']/ob[position()       = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='feelslike']/ob[position()         = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='windspeed']/ob[position()         = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='winddirection']/icon[position()   = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='dewpoint']/ob[position()          = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='skyconditions']/icon[position()   = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='precipitation']/icon[position()   = $thisPosition]"/></td>
                    <td><xsl:apply-templates select="../../obs[@type='humidity']/ob[position()          = $thisPosition]"/></td>
                </tr>
               </xsl:if>
               
               </xsl:for-each>
            </table>
Avatar of itortu

ASKER

sorry it is working, i was applying a css style and that was taking control over the attribute specification on the xsl file.


Thanks Gertone.

you are welcome

you can of course use the technique to assign a value to a class attribute instead of setting the bgcolor

cheers
Avatar of itortu

ASKER

hey Gertone, if you are still around. i have a small question.
how do you perfomr a trim on an let's say week day

so instead displaying monday tuesday wednesday it displays mon, tue, wed

thank you Gertone.

hi,

I am not sure what you are referring to
The only weekday I see is in the title
you copy that like this <xsl:value-of select="date"/>
so what you have in the source is what you get at the end
in my example it reads like this
"Washington, DC - Friday, May 12"

where do you see the cut-offs?

cheers
Avatar of itortu

ASKER

i apologize for that, I am referring to a different xsl file the one below:

<?xml version="1.0" encoding="ISO-8859-1"?>
<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:template match='xseven-day-forecast'>
<table border="0" cellspacing="0" width="455">
    <tr>
        <td>
            <img src="images/5-day-wed.gif"></img>
        </td>
    </tr>
    <tr class="bgrnd">
        <td>
            <p class="daycity">
                <xsl:value-of select="//location/@city"/>, <xsl:value-of select="//location/@state"/>
            </p>
           </td>
    </tr>
</table>

<table cellpadding="2" cellspacing="1" border="0" width="455">
    <tr>
        <xsl:apply-templates select="forecast-day[position() &lt; 6]" mode="mHead"/>
    </tr>
    <tr>
        <xsl:apply-templates select="forecast-day[position() &lt; 6]"/>
    </tr>
</table>
</xsl:template>

<xsl:template match="forecast-day" mode="mHead">
    <td class="daylabel">
        <xsl:value-of select="day"/>
    </td>
</xsl:template>

<xsl:template match="forecast-day">
<td class="daylabel">
    <img border="0" align="left">
        <xsl:attribute name="src">http://www.nbcweatherplus.com/sh/wxplus/icons/cc/40x40/<xsl:value-of select="icon-select"/>day.gif</xsl:attribute>
    </img>
    <font color="#FF0000"><b><xsl:value-of select="high"/><xsl:text disable-output-escaping="yes">&amp;#176;</xsl:text></b></font><br />
    <font color="#0000CC"><b><xsl:value-of select="low"/><xsl:text disable-output-escaping="yes">&amp;#176;</xsl:text></b></font>
</td>
</xsl:template>

</xsl:stylesheet>
> <xsl:value-of select="day"/>
It seems to take the full day as well
Do you have a copy of the XML source for this?
I don't seem to find a "trim"
Avatar of itortu

ASKER

oh i am not using any trim, currently the week day reads "Monday" "Tuesday" "Wednesday" etc etc
I would like to only puul the first three letters of the week day name "Mon" "Tue" "Wed"  (if possible)
 here is the copy of the xml file:
&#8722;
      <xseven-day-forecast rq="109">
<location city="Los Angeles" state="CA"/>
&#8722;
      <forecast-day>
<day>Monday</day>
<high src="met">72</high>
<low src="db">60</low>
<sky-conditions>Mostly Clear</sky-conditions>
<feels-like>64</feels-like>
<wind-speed>4</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>48</dew-point>
<humidity>60</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Tuesday</day>
<high src="met">75</high>
<low src="met">59</low>
<sky-conditions>Mostly Clear</sky-conditions>
<feels-like>65</feels-like>
<wind-speed>3</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>48</dew-point>
<humidity>60</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Wednesday</day>
<high src="met">76</high>
<low src="met">59</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>65</feels-like>
<wind-speed>3</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>48</dew-point>
<humidity>61</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Thursday</day>
<high src="met">76</high>
<low src="met">59</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>61</feels-like>
<wind-speed>4</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>47</dew-point>
<humidity>64</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Friday</day>
<high src="met">75</high>
<low src="met">59</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>61</feels-like>
<wind-speed>5</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>45</dew-point>
<humidity>59</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Saturday</day>
<high src="met">72</high>
<low src="met">59</low>
<sky-conditions>Mostly Clear</sky-conditions>
<feels-like>58</feels-like>
<wind-speed>6</wind-speed>
<wind-direction>W</wind-direction>
<dew-point>48</dew-point>
<humidity>70</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Sunday</day>
<high src="met">70</high>
<low src="met">57</low>
<sky-conditions>Mostly Cloudy</sky-conditions>
<feels-like>56</feels-like>
<wind-speed>6</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>47</dew-point>
<humidity>71</humidity>
<pop>0</pop>
<icon-select src="met">partlycloudy</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Monday</day>
<high>66</high>
<low>48</low>
<sky-conditions>Mostly Cloudy</sky-conditions>
<feels-like>54</feels-like>
<wind-speed>6</wind-speed>
<wind-direction>W</wind-direction>
<dew-point>46</dew-point>
<humidity>73</humidity>
<pop>10</pop>
<icon-select>mostlycloudyverylightrain</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Tuesday</day>
<high>71</high>
<low>45</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>57</feels-like>
<wind-speed>5</wind-speed>
<wind-direction>W</wind-direction>
<dew-point>46</dew-point>
<humidity>66</humidity>
<pop>0</pop>
<icon-select>clear</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Wednesday</day>
<high>74</high>
<low>46</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>59</feels-like>
<wind-speed>5</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>43</dew-point>
<humidity>60</humidity>
<pop>0</pop>
<icon-select>clear</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Thursday</day>
<high>71</high>
<low>44</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>57</feels-like>
<wind-speed>6</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>42</dew-point>
<humidity>59</humidity>
<pop>0</pop>
<icon-select>clear</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Friday</day>
<high>72</high>
<low>46</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>58</feels-like>
<wind-speed>5</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>38</dew-point>
<humidity>49</humidity>
<pop>0</pop>
<icon-select>clear</icon-select>
</forecast-day>
&#8722;
      <forecast-day>
<day>Saturday</day>
<high>75</high>
<low>44</low>
<sky-conditions>Clear</sky-conditions>
<feels-like>59</feels-like>
<wind-speed>5</wind-speed>
<wind-direction>SW</wind-direction>
<dew-point>41</dew-point>
<humidity>54</humidity>
<pop>0</pop>
<icon-select>clear</icon-select>
</forecast-day>
</xseven-day-forecast>
hey, sorry,
I completely misread the question
>how do you perfomr a trim on an let's say week day

I thought you were annoyed by an existing trim,
I didn't realise you were looking for one

well, that is easy, you can use substring
<xsl:value-of select="substring(date,1,3)"/>

substring of date, starting at character 1, 3 characters long

sorry about the confusion
cheers

Geert
Avatar of itortu

ASKER

GErtone, I have to leave now, but tomorrow I will be back in the morning central time.

Thank you fro your help, take care. See you tomorrow!