html - 使用 XSLT 交替行颜色，使用 `rowspan` 交替单元格-6ren

html - 使用 XSLT 交替行颜色，使用 `rowspan` 交替单元格

转载作者：行者123 更新时间：2023-11-28 13:07:26

27

4

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

27

4

0

文章推荐： ios - 查询核心数据中所有实体的快速简便方法

文章推荐： html - 如何使用div在html表单中并排获取两个字段

文章推荐： ios - Swift UIView 框架未在 animateWithDuration 内正确更新

文章推荐： jquery - Wow Slider 画廊的问题

r - 交替，交织或交织两个向量
我想交织相同模式和相等长度的两个向量。说： a <- rpois(lambda=3,n=5e5) b <- rpois(lambda=4,n=5e5) 我想交织或交织这两个向量，以创建一个等效于c(a
r - 交替、交织或交织两个矩阵
我有两个矩阵，我想以交替方式交织/交错/堆叠在彼此之上/rbind。 ranks=1:3 names=c("Karl", "Klaus", "Mary") x <- cbind(ranks, name
不带括号的 JavaScript 交替
我在 JavaScript 中有一个字符串，如下所示: "This {{@is}} a $|test$| string with $|@string$| delimiters {{as}} follo
python - 将字符串与列表条目合并 - 交替
那么，我正在尝试“合并”一个字符串 (a) 和一个字符串列表 (b): a = '1234' b = ['+', '-', ''] 获得所需的输出(c): c = '1+2-34' 所需输出字符串中的
algorithm - 交替 bool 范围的二维正交加法投影
我有几个可变长度的数组，其中填充了表示好数据 block 和坏数据 block 的元组。 input = [ [(True, 0, 400), (False, 400, 500), (True
javascript - 是否可以在单元格之间旋转(交替)表格内容？
我有一个包含 3 个单元格的表，我想知道是否可以在每个单元格之间“旋转”数据？基本上，在设定的时间后，我希望第一个单元格中的数据移动到第二个单元格，第二个单元格数据移动到第三个单元格，第三个单元格数
css - 交替 Richfaces 数据表行颜色
使用 RichFaces dataTable 组件交替行颜色的最简单方法是什么？最佳答案查找组件的 rowClasses 属性。抱歉.. 阅读 richfaces 文档两秒钟后就明白了。 :)
javascript - 表列 slider 交替
我想创建一个有 4 列的表格，但只显示 3 列。所以我理想情况下有一个跨越 3 列的 div 并应用溢出:隐藏。单击按钮时，我希望第 3 列(公司 2)向左滑动，并替换为第 4 列(公司 3)，以便将
javascript - 交替 ng 重复
有没有办法在 AngularJS 中替代 ng-repeats ？例如，假设我有两个数组。数组1 [a1, a2, a3, ...] 数组2 [b1, b2, b3, ...] 我想针对中型和大屏
python - 交替 append 两个列表中的元素
我有三个包含元素的列表: a = [[0,1],[2,3],...] b = [[5,6],[7,8],...] c = [] 我想将 a 和 b 中的元素 append 到 c 中以获得: c =
matlab - 有没有办法绘制具有不同(交替)高度的轴值？
我喜欢在 MATLAB 中绘制经过傅立叶变换的信号。通过 set(gca,'xtick',peaks,'FontSize',12);我可以在 x 轴上显示峰值。但有时，峰值靠得太近，显示峰值的文本与其
html - 交替 CSS 网格列和移动 View
我正在使用 CSS Grid 为我的网站构建服务列表。整个网站网格中的一行被分成两个 CSS 网格列。在第一行的第一列中，有一项服务的描述。在第二列中，有一个代表服务的图像。每一行，描述和图像交替
DIV 的 CSS 交替 float
我有以下 html 代码: 1 2 3 4 5 6 7 8 我想做的是使用奇数/偶数 nth-child 选择器对它们进行一些交替
javascript - 交替/双模式 JavaScript 水印
在下面的代码示例中，我将 window.status 从“a”替换为“b” function alternateViaIntrvl() { setInterval('alterStatus()
html - 消失的
内容。交替
下面的CSS和HTML代码生成 News Interviews ---------------------- Djing Break dance ---------------------- 为什么横
ios - Swift 交替 UITableViewCell 渐变颜色
我曾经在 tableView willDisplay cell 方法中使用这段代码，但它没有准确地交替颜色 - 它几乎做到了，但有时仍然搞砸了 1 或 2 个相同的颜色和我不确定。我发现一些建议在我
java - 存储每几个小时更新一次的小型、交替、公共(public)数据的最佳方法是什么？
我的问题的本质是解决方案太多，我想在围绕它构建基础设施之前找出哪一个在优缺点中胜出。 (为了本论坛的目的进行了简化)这是一个拍卖网站，其中五个拍卖按排名#1-5 存储，#1 是当前特色拍卖。其他四个人
javascript - 用 css 交替 div 线分隔符
如果可能的话，我正在尝试找出是否有一种方法可以替换内容行分隔符的颜色。例如: 问题是它必须是自动的，所以我假设可能需要 javascript，但我找不到这样的东西。我知道有些事情表明如果你有类似 t
html - 交替 DIV 和 P 垂直对齐
这个看似简单的问题困扰了我整整 10 年。 (好的，不是每天!) 它在 IE 中运行良好，但在 FF 和 Chrome 中运行不正常，这通常表示代码有问题...我想在两侧都有 DIV 框(它们实际上是
python - 交替 1 和 0 的最小数量
我想找到交替 [0, 1, 0, 1] 所需的最少翻转次数，例如给定 [1, 1, 0, 1]。所以在这种情况下，它是一次翻转。 def solution(A): count = 0

首页

博学

6Ren·AI

商城

html - 使用 XSLT 交替行颜色，使用 `rowspan` 交替单元格