通过XSL交替行颜色的HTML表

Joe*_*elB 15 html xslt html-table

在HTML表格中交替行颜色的最简单方法是什么(a.ka.条带化).我的大多数表都是在XSL模板中创建的,如下所示,表,thead等在另一个模板中定义.

<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>
Run Code Online (Sandbox Code Playgroud)

我的偏好是在元素上使用交替的类.

Tom*_*lak 38

如果必须在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>
Run Code Online (Sandbox Code Playgroud)

使用今天的浏览器,您可以更好地使用CSS和tr:nth-child(odd).

这样可以减少XSLT方面的麻烦,更清晰的HTML标记 - 并且它与客户端表排序和过滤兼容.