• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • Last Modified:

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.
0
itortu
Asked:
itortu
  • 6
  • 5
1 Solution
 
Geert BormansCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Geert BormansCommented:
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 BormansCommented:
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 BormansCommented:
> <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 BormansCommented:
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

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now