我有以下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
的单元格然后我想要整个行第二个位于紫色的位置。
我如何做到这一点?
答案 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
类。