我有以下 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 的单元格为白色然后我希望第三个位点的整行再次显示为紫色。
我该如何实现？
最佳答案
这个怎么样:
<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 类。
关于html - 使用 XSLT 交替行颜色，使用 `rowspan` 交替单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19831907/