2011-02-10 129 views
6

Tengo un documento XSL que tiene una cantidad vanaible de artículos insertados en él. Necesito los colores de fondo de los artículos que se alternan - "impar" y luego "incluso"Alternando colores de fila en una clase tr usando XSL

<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> 

he consultaron este mensaje: HTML table with alternating row colors via XSL

pero mi caso es diferente, creo. Solo necesito cambiar la clase tr en cada iteración. Lo siento por el formato extraño, parece que tengo problemas para pegar el código en Chrome aquí.

+0

Podría explicar más acerca de cómo sus necesidades son diferentes a las de la entrada que ha enlazado a. –

+0

Buena pregunta, +1. Vea mi respuesta para una solución completa y breve. :) –

+0

De hecho, es un duplicado exacto de [tabla HTML con colores de fila alternativos a través de XSL] (http://stackoverflow.com/questions/469917/html-table-with-alternating-row-colors-via-xsl) –

Respuesta

8

Uso:

<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};"> 
+0

Gracias. Esto lo resolvió. Leyendo la pregunta que he vinculado (después de que lo entiendo) veo que mis requisitos eran similares, así que gracias por tomarse el tiempo para responder. – BobFlemming

+0

@dimitre - ¿Es necesario '= 1'? Consigo los resultados esperados si acabo de hacer: ' #efefef #ababab '. ¿Hay alguna razón por la cual esta sería una mala idea? –

+0

@DevNull. Supongo que está bien. Solo un número-> conversión booleana. – Flack

0

Use position() y el resto al dividir por dos.

0

Su caso es muy similar. Lo que debes hacer es definir un nombre de clase basado en la posición. @Jim Garrison te da una buena sugerencia, pero creo que ese ejemplo es necesario porque hay ejemplos con position() en los ejemplos que haces referencia y se formula la pregunta.

<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;"> 
.... 
2
<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> 
+0

+1 para mostrar también el OP cómo limpiar el código con AVT. –

Cuestiones relacionadas