Alternating row colours in a tr class using XSL

Question

I have a XSL document which has a varaible number of articles inserted into it. I need the background colours of the articles to alternate - "Odd" then "even"

<xsl:for-each select="newsletter/section/article">
    <tr class="odd" style="background-color: #efefef;">
        <td valign="top">
            <xsl:element name="a">
                <xsl:attribute name="href">
                    <xsl:value-of select="link" />
                </xsl:attribute>
                <img align="left" valign="top" width="110" 
                            style="padding: 0 4px 4px 0; border:0;">
                    <xsl:attribute name="alt">
                        <xsl:value-of select="title" />
                    </xsl:attribute>
                    <xsl:attribute name="src">
                        <xsl:value-of select="img" />
                    </xsl:attribute>
                </img>
            </xsl:element>
        </td>
        <td valign="top" style="padding: 4px 4px 18px 0;">
            <strong>
                <xsl:element name="a">
                    <xsl:attribute name="href">
                        <xsl:value-of select="link" />
                    </xsl:attribute>
                    <xsl:value-of select="title"/>
                </xsl:element>
            </strong>
            <br />
            <xsl:value-of select="excerpt"/>
        </td>
    </tr>
</xsl:for-each>

Ive looked at this post: HTML table with alternating row colors via XSL

but my case is different I believe. I just need to change the tr class on each iteration. Sorry for the weird formatting, I seem to be having problems pasting code in Chrome on here.

Answer 1

<xsl:for-each select="date">
    <tr>
        <xsl:if test="position() mod 2 = 1">
            <xsl:attribute name="class">odd</xsl:attribute>
            <xsl:attribute name="style">background-color: #efefef;"
            </xsl:attribute>
        </xsl:if>
        <td valign="top">
            <a href="{link}">
                <img align="left" valign="top" width="110"
                            style="padding: 0 4px 4px 0; border:0;"
                            alt="{title}"
                            src="{img}"/>
            </a>
        </td>
        <td valign="top" style="padding: 4px 4px 18px 0;">
            <strong>
                <a href="{link}">
                    <xsl:value-of select="title"/>
                </a>
            </strong>
            <br />
            <xsl:value-of select="excerpt"/>
        </td>
    </tr>
</xsl:for-each>

Answer 2

Your case is very similar. The thing you should do is to define a class name based on position. @Jim Garrison gives you good prompt but I think that example is necessary because there are examples with position() in the examples you reference and the question is asked.

<xsl:for-each select="newsletter/section/article">
  <!-- create index-based variable -->
  <xsl:variable name="classname">
    <xsl:choose>
      <xsl:when test="position() mod 2 = 0">
        <xsl:text>even</xsl:text>
      </xsl:when>
      <xsl:otherwise>
         <xsl:text>odd</xsl:text>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <!-- insert contents of your variable -->
  <tr class="{$classname}" style="background-color: #efefef;">
....

Answer 3

Use:

<xsl:for-each select="newsletter/section/article">
  <xsl:variable name="vColor">
    <xsl:choose>
      <xsl:when test="position() mod 2 = 1">
        <xsl:text>#efefef</xsl:text>
      </xsl:when>
      <xsl:otherwise>#ababab</xsl:otherwise>
        </xsl:choose>
      </xsl:variable>


  <tr class="odd" style="background-color: {$vColor};">

Answer 4

Use position() and the remainder when dividing by two.