Table HTML avec des couleurs de ligne alternées via XSL

Quel est le moyen le plus facile d'alterner ligne couleurs dans un tableau HTML (un.ka. striping). La plupart de mes tableaux sont créés dans des modèles XSL comme suit, avec la table, thead, etc.. définie dans un autre modèle.

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

Ma préférence est pour l'utiliser en alternance des cours sur les éléments.

source d'informationauteur JoelB

  1. 35

    Si vous devez produire les couleurs sont codées en dur dans le 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>

    Avec les navigateurs d'aujourd'hui, vous êtes beaucoup mieux l'aide de CSS et tr:nth-child(odd).

    Il en résulte moins de tracas sur le XSLT côté, beaucoup plus propre balisage HTML et il est compatible avec les client-côté de la table de tri et de filtrage.

  2. 4

    Vous pouvez également utiliser css3.

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

    Pris en charge comme des IE9 un certain temps par tous les autres navigateurs.

  3. 1

    Utiliser une feuille de style XSL:Quand et comparer position mod 2 pour obtenir pair ou impair de lignes à modifier les classes si nécessaire comme:

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

    EDIT: l'Obtention de mon pair/impair le droit chemin autour de soupir

  4. 1

    Peut nous voulons changer uniquement le nom de la classe au lieu de cela, quand pouvez choisir à l'intérieur d'une variable pour activer le changement de sa valeur intrinsèque. Quelque chose comme ceci:

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

    Avec cela, nous sommes capables de changer le nom de la variable et puis on peut changer, par exemple, un " div " contenu de classe.

    <div class="{$myDemoClass}">

    Ce qui concerne les!