使用XSLT交替行颜色和使用`rowspan`的单元格

时间:2013-11-07 09:15:14

标签: html css xml xslt xslt-1.0

我有以下XML文件:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="loci.xsl"?>
<Loci>
    <Locus>
        <Id>LOCUS_1</Id>
        <Alleles>
            <Allele>
                <Name>Allele_1</Name>
                <Description>Description for 1</Description>
            </Allele>
        </Alleles>
    </Locus>
    <Locus>
        <Id>LOCUS_2</Id>
        <Alleles>
            <Allele>
                <Name>Allele_2_a</Name>
                <Description>Description for 2 a</Description>
            </Allele>
            <Allele>
                <Name>Allele_2_b</Name>
                <Description>Description for 2 b</Description>
            </Allele>
        </Alleles>
    </Locus>
    <Locus>
        <Id>LOCUS_3</Id>
        <Alleles>
            <Allele>
                <Name>Allele_3</Name>
                <Description>Description for 3</Description>
            </Allele>
        </Alleles>
    </Locus>
</Loci>

我转换为带有以下XSL的HTML表格,以及带有嵌入式CSS的样式:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
<style type="text/css">
#report
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 90%;
    text-align: left;
    border-collapse: collapse;
    color: #039;
}
#report th
{
    font-size: 16px;
    font-weight: normal;
    padding: 10px 8px;
    color: #039;
    text-align: left;
    border-right: 1px solid #9baff1;
    border-left: 1px solid #9baff1;
    border-top: 2px solid #9baff1;
    border-bottom: 2px solid #9baff1;
}
#report td
{
    padding: 5px;
    color: #669;
    border-right: 1px solid #aabcfe;
    border-left: 1px solid #aabcfe;
}
#report  tr:nth-child(even) 
{ 
    background: #e8edff; 
}
</style>
</head>
  <body>
    <table border="1" id="report">
      <tr>
        <th>Locus</th>
        <th>Allele</th>
        <th>Description</th>
      </tr>
      <xsl:for-each select="Loci/Locus">
        <xsl:for-each select="Alleles/Allele">
          <tr>
            <xsl:if test="position() = 1">
              <td rowspan="{last()}">
                <xsl:value-of select="ancestor::Locus[1]/Id"/>
              </td>
            </xsl:if>
            <td><xsl:value-of select="Name"/></td>
            <td><xsl:value-of select="Description"/></td>
          </tr>
        </xsl:for-each>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

结果如下:

table

但是,我希望斑马条纹可以根据第一列进行交替。

所以第一个基因座的行完全是紫色的,但是对于第二个基因座,我也希望白色的Allele_2_bDescription for 2 b的单元格然后我想要整个行第二个位于紫色的位置。

我如何做到这一点?

1 个答案:

答案 0 :(得分:2)

这个怎么样:

  <xsl:for-each select="Loci/Locus">
    <xsl:variable name="oddRow" select="position() mod 2" />
    <xsl:for-each select="Alleles/Allele">
      <tr>
        <xsl:if test="$oddRow">
          <xsl:attribute name="class">alt-row</xsl:attribute>
        </xsl:if>
        <xsl:if test="position() = 1">
          <td rowspan="{last()}">
            <xsl:value-of select="ancestor::Locus[1]/Id"/>
          </td>
        </xsl:if>
        <td><xsl:value-of select="Name"/></td>
        <td><xsl:value-of select="Description"/></td>
      </tr>
    </xsl:for-each>
  </xsl:for-each>

然后,您只需使用CSS将背景着色应用于alt-row类。