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

问题描述

在HTML表格中交替行颜色的最简单方法是什么（a.ka. striping）。我的大多数表格都是在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> 
  

我的首选是在元素上使用交替类。

   < xsl：template match =typ：info> 
< xsl：variable name =css-class> 
 < xsl：when test =position（）mod 2 = 0>偶< / xsl：when> 
< xsl：otherwise> odd< / xsl：otherwise> 
 < / 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-子（奇数）。

这样可以减少XSLT方面的麻烦，更简洁的HTML标记 - 并且与客户端表格排序和筛选兼容。

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.

解决方案

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>

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

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