title: XSL alternate background color of HTML row results based on changing value of Node Element populated by SQL query
body: <p>I need help in setting up my HTML output from the XSL file to generate the row results to have an alternating background color based on when the value of a node element changes.  The data is coming from SQL Server 2008 and the query results are sorted on the node element of "DivisionName".</p>
  
  <pre><code>SELECT      
    d.DivisionName,
    CASE
          WHEN t.ActualFinish is not NULL
                THEN convert(varchar, datepart(mm, t.ActualFinish))+ '/' + convert(varchar, datepart(dd, t.ActualFinish)) + '/' + convert(varchar, datepart(yyyy, t.ActualFinish))
          ELSE ' '
    END AS "Date",
    r.RegionName, 
    t.Name, 
    CASE
          WHEN t.ScheduleByElement is not NULL
                THEN t.ScheduleByElement
          ELSE ' '
    END AS "ScheduleByElement",
    '' AS "Activity",
    '' AS "Team",
    CASE
          WHEN t.WatchStatus is not NULL
                THEN convert(varchar, datepart(mm, t.WatchStatus))+ '/' + convert(varchar, datepart(dd, t.WatchStatus)) + '/' + convert(varchar, datepart(yyyy, t.WatchStatus))
          ELSE ' '
    END AS "Status"
  FROM           
    dbo.Tasks AS t 
          INNER JOIN dbo.Division AS d 
                ON t.fk_DivisionID = d.DivisionID 
          INNER JOIN dbo.Region AS r 
                ON t.fk_RegionID = r.RegionID
  WHERE        
    (t.OutlineLevel = 3) 
    AND (t.ScheduleByElement &lt;&gt; '') 
    AND (t.FileName LIKE 'NVDE%')
    AND (t.ActualFinish is not NULL)
  ORDER BY d.DivisionName, t.ActualFinish, r.RegionName 
  FOR XML PATH('DivisonName'), ROOT('CCDN')
  </code></pre>
  
  <p>Listed below are the complete contents of the XSL file:</p>
  
  <pre><code>&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  &lt;xsl:output method="html" indent="yes"/&gt;
  &lt;xsl:template match="/ROOT"&gt;
  
  
      &lt;table border="1" cellpadding="6"&gt;
          &lt;tr bgcolor="#9acd32"&gt;
              &lt;td&gt;Division&lt;/td&gt;
              &lt;td&gt;Date&lt;/td&gt;
              &lt;td&gt;Region&lt;/td&gt;
              &lt;td&gt;System Name&lt;/td&gt;
              &lt;td&gt;Schedule by/Plan by Element&lt;/td&gt;
              &lt;td&gt;Activity&lt;/td&gt;
              &lt;td&gt;Deployment Engineering Team&lt;/td&gt;
              &lt;td&gt;Status&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;xsl:for-each select="CCDN/DivisonName [not(preceding-sibling::DivisionName[1]/@DivisionNameID = @DivisionNameID)]"&gt;
              &lt;xsl:variable name="DivisionNameID" select="@DivisionNameID" /&gt;
              &lt;xsl:variable name="bgcolor"&gt;
                  &lt;xsl:choose&gt;
                      &lt;xsl:when test="position() mod 2 = 1"&gt;#FFFFCC&lt;/xsl:when&gt;
                      &lt;xsl:otherwise&gt;#CCFFFF&lt;/xsl:otherwise&gt;
                  &lt;/xsl:choose&gt;
              &lt;/xsl:variable&gt;
  
              &lt;xsl:for-each select=".|following-sibling::DivisionName[@DivisionNameID = $DivisionNameID]"&gt;
                  &lt;tr bgcolor="{$bgcolor}"&gt;
                      &lt;xsl:for-each select="./*"&gt;
                          &lt;td&gt;
                              &lt;xsl:value-of select="." /&gt;
                          &lt;/td&gt;
                      &lt;/xsl:for-each&gt;
                  &lt;/tr&gt;
              &lt;/xsl:for-each&gt;
          &lt;/xsl:for-each&gt;
  
      &lt;/table&gt;
  
  
  &lt;/xsl:template&gt;
  </code></pre>
  
  <p></p>
  
  <p>I've searched other questions similar to this on your site, but have not found an example where the color is defined on a changing value of a specific node element.  Currently, the result is that the table is alternating the background color of every other row between #FFFFCC and #CCFFFF, regardless of the value of the DivisionName.</p>
  
  <p>The following HTML probably better examplifies the results I'm seeking.  The rows are sorted ascending according to the divisions, A, B, C and D.  All of the rows associated with the first division are one shade (white) or color and all of the rows associated with the next are another shade or color and then repeat from that point on.  If no rows are returned for A, then B will be white and alterante.  There is no hard-coding of defining a specific shade or color for a specific division value.  It alterantes regardless of the division returned and only cares if the division value changes.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
          table.mystyle
          {
          border-width: 0 0 1px 1px;
          border-spacing: 0;
          border-collapse: collapse;
          border-style: solid;
          }
          .mystyle td, .mystyle th
          {
          margin: 0;
          padding: 4px;
          border-width: 1px 1px 0 0;
          border-style: solid;
          }
          tr.oddcolor
          {
          Background-color:#FFFFFF;
          }
          tr.evencolor
          {
          Background-color:#CCCCCC;
          }
      &lt;/style&gt;
  &lt;table class="mystyle"&gt;
  &lt;tr&gt;
  &lt;b&gt;
    &lt;td&gt;Division&lt;/td&gt;
    &lt;td&gt;Date&lt;/td&gt;
    &lt;td&gt;Region&lt;/td&gt;
    &lt;td&gt;System Name&lt;/td&gt;
    &lt;td&gt;Schedule by/Plan by Element&lt;/td&gt;
    &lt;td&gt;Activity&lt;/td&gt;
    &lt;td&gt;Deployment Engineering Team&lt;/td&gt;
    &lt;td&gt;Status&lt;/td&gt;
  &lt;/b&gt;
   &lt;/tr&gt;
   &lt;tr bgcolor="#FFFFCC"&gt;
    &lt;td&gt;A&lt;/td&gt;
    &lt;td&gt;3/2/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#FFFFCC"&gt;
    &lt;td&gt;A&lt;/td&gt;
    &lt;td&gt;4/12/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#FFFFCC"&gt;
    &lt;td&gt;A&lt;/td&gt;
    &lt;td&gt;4/12/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#CCFFFF"&gt;
    &lt;td&gt;B&lt;/td&gt;
    &lt;td&gt;4/27/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#CCFFFF"&gt;
    &lt;td&gt;B&lt;/td&gt;
    &lt;td&gt;5/1/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#FFFFCC"&gt;
    &lt;td&gt;C&lt;/td&gt;
    &lt;td&gt;5/15/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#FFFFCC"&gt;
    &lt;td&gt;C&lt;/td&gt;
    &lt;td&gt;5/24/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr bgcolor="#CCFFFF"&gt;
    &lt;td&gt;D&lt;/td&gt;
    &lt;td&gt;5/25/2012&lt;/td&gt;
    &lt;td&gt;region&lt;/td&gt;
    &lt;td&gt;xxx&lt;/td&gt;
    &lt;td&gt;xxxx&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thanks.</p>