16

在 HTML 表格中交替行颜色的最简单方法是什么（也称为条带化）。我的大多数表都是在 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>

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

4

4 回答 4

39

如果您必须在 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 标记更清晰 - 并且它与客户端表格排序和过滤兼容。

于 2009-01-22T17:01:53.813 回答
4

您也可以使用 css3。

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

所有其他浏览器在相当长的一段时间内都支持 IE9。

于 2011-05-01T11:40:40.300 回答
1

使用 XSL:When 并比较位置 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>

编辑：让我的奇数/偶数以正确的方式叹息

于 2009-01-22T17:03:54.607 回答
1

可能我们只想更改类名，什么时候可以在变量内部选择以启用更改其内部值。像这样的东西：

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

问候！

于 2010-11-04T20:09:07.400 回答