Question

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

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

Answer 1

如果必须在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)。

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

Answer 2

您也可以使用css3。

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

从IE9开始支持所有其他浏览器已经有一段时间了。

Answer 3

使用XSL：当和比较位置mod 2时，需要奇数或偶数行来在需要时更改类，如：

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

编辑：叹息

Answer 4

我们可能只想更改类名，而可以在变量内部选择以启用更改其内部值。像这样：

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

通过这个，我们可以更改变量名称，然后我们可以更改例如div类内容。

<div class="{$myDemoClass}">

问候！

通过XSL交替行颜色的HTML表

4 个答案: