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.
itortuAsked:
Who is Participating?
 
Geert BormansInformation ArchitectCommented:
Hi itortu,
>                 <xsl:variable name="thisPosition" select="position()"/>
>                 <tr>
>                 <xsl:if test="$thisPosition mod 2 = 1">

First this,
I had a slicht bug in the previous XSLT
the <tr> should be inside the test, otherwise you create an empty <tr></tr> every other row

                 <xsl:variable name="thisPosition" select="position()"/>
                 <xsl:if test="$thisPosition mod 2 = 1">
                 <tr>
                ...
                </tr>
                </xsl:if>
                </xsl:for-each>

would be better

now you would have another test for alternating row colours
                 <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">yellow</xsl:attribute>
                          </xsl:otherwise>
                        </xsl:choose>
                 ...
                </tr>
                </xsl:if>

the new test uses mod again to switch the row color

Cheers!
0
 
itortuAuthor Commented:
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>
0
 
itortuAuthor Commented:
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.

0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Geert BormansInformation ArchitectCommented:
you are welcome

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

cheers
0
 
itortuAuthor Commented:
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.

0
 
Geert BormansInformation ArchitectCommented:
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
0
 
itortuAuthor Commented:
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>
0
 
Geert BormansInformation ArchitectCommented:
> <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"
0
 
itortuAuthor Commented:
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>
0
 
Geert BormansInformation ArchitectCommented:
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
0
 
itortuAuthor Commented:
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!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.