通过 XSL 具有交替行颜色的 HTML 表格 [英] HTML table with alternating row colors via XSL

问题描述

在 HTML 表格中交替行颜色的最简单方法是什么(也称为条带化).我的大部分表格都是在 XSL 模板中创建的，如下所示，表格、thead 等在另一个模板中定义.

What is the easiest way to alternate row colors in an HTML table (a.ka. striping). Most of my tables are created in XSL templates like the following, with the table, thead, etc.. defined in another template.

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

我更喜欢在元素上使用交替类.

My preference is to use alternating classes on the elements.

推荐答案

如果您必须在 HTML 中生成硬编码颜色:

If you must produce hard-coded colors in 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>

在当今的浏览器中，您最好使用 CSS 和 tr:nth-child(odd).

With today's browsers you are much better off using CSS and tr:nth-child(odd).

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

This results in less hassle on the XSLT side, much cleaner HTML markup - and it's compatible with client-side table sorting and -filtering.

这篇关于通过 XSL 具有交替行颜色的 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！