1

我有以下 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>

结果如下所示：

桌子

但是，我希望斑马条纹根据第一列交替变化。

所以第一个基因座的行完全是紫色的是可以的，但是对于第二个基因座，我也想要白色的细胞，Allele_2_b然后Description for 2 b我想要第三个基因座的整行是紫色的。

我该如何做到这一点？

4

1 回答 1

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类应用背景阴影。

于 2013-11-07T10:38:48.507 回答