mapeo - Tabla HTML con colores de fila alternativos a través de XSL

xslt editor

Question

¿Cuál es la forma más fácil de alternar colores de fila en una tabla HTML (a.ka. striping). La mayoría de mis tablas se crean en plantillas XSL como las siguientes, con la tabla, thead, etc. definidas en otra plantilla.

<xsl:template match="typ:info">
  <tr>
    <td>
      <xsl:value-of select="typ:dateAccessed" />
    </td>
    <td>
      <xsl:value-of select="typ:loginId" />
    </td>
  </tr>
</xsl:template>

Mi preferencia es usar clases alternas en los elementos.

Answer 1

También puedes usar css3.

tr:nth-child(odd) { background: #ff0000; }

Soportado desde IE9 por bastante tiempo por todos los otros navegadores.

Answer 2

Use un XSL: cuando compare y compare la posición mod 2 para obtener filas impares o pares para modificar las clases cuando sea necesario, como:

<xsl:choose>
    <xsl:when test="position() mod 2 = 1">
        <td class="odds">blah</td>
    </xsl:when>
    <xsl:otherwise>
        <td class="even">blah</td>
    </xsl:otherwise>
</xsl:choose>

EDITAR: Obtener mi impar / incluso el camino correcto alrededor de un suspiro

Answer 3

Queremos cambiar solo el nombre de la clase en su lugar, cuando podemos elegir dentro de una variable para permitir cambiar su valor interno. Algo como esto:

<xsl:variable name="myDemoClass" >
   <xsl:choose>
     <xsl:when test="position() mod 2 = 0">
       <xsl:text>myDemoClass</xsl:text>
     </xsl:when>
     <xsl:otherwise>
       <xsl:text>myDemoClass otherClass</xsl:text>
     </xsl:otherwise>
   </xsl:choose>
</xsl:variable>

Con esto, podemos cambiar el nombre de la variable y luego podemos cambiar, por ejemplo, un contenido de clase div.

<div class="{$myDemoClass}">

¡Saludos!

Answer 4

Si debe producir colores codificados en HTML:

<xsl:template match="typ:info">
  <xsl:variable name="css-class">
    <xsl:choose>
      <xsl:when test="position() mod 2 = 0">even</xsl:when>
      <xsl:otherwise>odd</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <tr class="{$css-class}">
    <td>
      <xsl:value-of select="typ:dateAccessed" />
    </td>
    <td>
      <xsl:value-of select="typ:loginId" />
    </td>
  </tr>
</xsl:template>

Con los navegadores de hoy, es mucho mejor usar CSS y tr:nth-child(odd) .

Esto da como resultado menos molestias en el lado XSLT, un etiquetado HTML mucho más limpio, y es compatible con la clasificación y filtrado de tablas del lado del cliente.