css - 使用 xslt 创建可变长度的梁-6ren

css - 使用 xslt 创建可变长度的梁

转载作者：太空宇宙更新时间：2023-11-04 09:13:30

来自以下 xml 数据:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="kandidaten.xsl" type="text/xsl"?> 
<auswertung>
    <kandidat>
        <name>Peter</name>
        <punkte>67</punkte>
    </kandidat>
    <kandidat>
        <name>Karl</name>
        <punkte>87</punkte>
    </kandidat>
    <kandidat>
        <name>Anita</name>
        <punkte>36</punkte>
    </kandidat>
    <kandidat>
        <name>Rosi</name>
        <punkte>67</punkte>
    </kandidat>
    <kandidat>
        <name>Heiner</name>
        <punkte>50</punkte>
    </kandidat>
    <kandidat>
        <name>Paul</name>
        <punkte>45</punkte>
    </kandidat>
</auswertung>

我想用 xslt 创建以下输出:

为此我写了下面的xslt代码:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="2.0">


<xsl:template match="auswertung">
    <html>
        <head>
            <title>Kandidaten</title>
        </head>
        <body>
            <h1>Kandidaten und ihre Punkte</h1>
            <hr/>
            <table>
                <xsl:apply-templates select="kandidat">
                    <xsl:sort select="punkte" order="descending"></xsl:sort>
                </xsl:apply-templates>
            </table>

        </body>
    </html>
</xsl:template>

<xsl:template match="kandidat">

    <tr>
        <td>
            <xsl:value-of select="name/text()"/>
        </td>

<!-- second columns of table is supposed to contain the -->
<!-- points  ("punkte") of the respective candidate ("kandidat") -->
        <td>

<!-- second column contains a paragraph whose background-color is blue -->
            <p bgcolor="#0000ff">
               <xsl:call-template name="create_empty_space">
                    <xsl:with-param name="count" select="punkte/text()"/>
                    <xsl:with-param name="number" select="punkte/text()"/>
               </xsl:call-template>
           </p>         
        </td>                           
    </tr>
</xsl:template>

<xsl:template name="create_empty_space">
    <xsl:param name="count"/>
    <xsl:param name="number"/>

<!-- print number (points achieved by candidate) in the middle of the beam -->                 
<xsl:if test="$count = round($number div 2)">
        <font color="#ffff00">
            <xsl:value-of select="$number"/>
        </font>
    </xsl:if>
    <xsl:if test="$count > 0"> 


  <!-- amount of empty space created is supposed to depend on the number of -->
  <!--points, therefore function "create_empty_space" is called recursively-->
  <!-- depending on the number of points -->
  <!--... example: if points==20, function is called 20 times -->                                 

<xsl:text> </xsl:text>
        <xsl:call-template name="create_empty_space">
            <xsl:with-param name="count" select="$count - 1"/>
            <xsl:with-param name="number" select="$number"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>


</xsl:stylesheet>

不过，当我运行代码时，所有光束的大小都相同。我怎样才能使光束的长度对应于各个候选人的点数？

最佳答案

由于您在 XML 输入中使用了 xml-stylesheet，我怀疑您是否真的在使用 2.0 处理器。

正如 Martin 建议的那样，第一个元素的宽度应为 100%，其余元素的宽度应根据第一个(最大值)计算。

这是您的 XSLT 的修改版本...

XSLT 1.0

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:strip-space elements="*"/>

  <!--This is easier in XSLT 2.0:
  <xsl:variable name="maxPoints" select="max(/*/kandidat/punkte)"/>
  -->
  <xsl:variable name="maxPoints">
    <xsl:for-each select="/*/kandidat">
      <xsl:sort select="punkte" order="descending"/>
      <xsl:if test="position() = 1">
        <xsl:value-of select="punkte"/>
      </xsl:if>
    </xsl:for-each>
  </xsl:variable>

  <xsl:template match="auswertung">
    <html>
      <head>
        <title>Kandidaten</title>
      </head>
      <body>
        <h1>Kandidaten und ihre Punkte</h1>
        <hr/>
        <table style="width: 100%">
          <xsl:apply-templates select="kandidat">
            <xsl:sort select="punkte" order="descending"/>
          </xsl:apply-templates>
        </table>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="kandidat">
    <tr>
      <td style="width: 1%">
        <xsl:value-of select="name"/>
      </td>

      <!-- second columns of table is supposed to contain the -->
      <!-- points  ("punkte") of the respective candidate ("kandidat") -->
      <td>

        <!-- second column contains a paragraph whose background-color is blue -->
        <div style="text-align: center;width: {round(punkte div $maxPoints * 100)}%;color: #ffff00;background-color: #0000ff;">
          <xsl:value-of select="punkte"/>
        </div>         
      </td>                           
    </tr>
  </xsl:template>

</xsl:stylesheet>

输出

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Kandidaten</title>
   </head>
   <body>
      <h1>Kandidaten und ihre Punkte</h1>
      <hr>
      <table style="width: 100%">
         <tr>
            <td style="width: 1%">Karl</td>
            <td>
               <div style="text-align: center;width: 100%;color: #ffff00;background-color: #0000ff;">87</div>
            </td>
         </tr>
         <tr>
            <td style="width: 1%">Peter</td>
            <td>
               <div style="text-align: center;width: 77%;color: #ffff00;background-color: #0000ff;">67</div>
            </td>
         </tr>
         <tr>
            <td style="width: 1%">Rosi</td>
            <td>
               <div style="text-align: center;width: 77%;color: #ffff00;background-color: #0000ff;">67</div>
            </td>
         </tr>
         <tr>
            <td style="width: 1%">Heiner</td>
            <td>
               <div style="text-align: center;width: 57%;color: #ffff00;background-color: #0000ff;">50</div>
            </td>
         </tr>
         <tr>
            <td style="width: 1%">Paul</td>
            <td>
               <div style="text-align: center;width: 52%;color: #ffff00;background-color: #0000ff;">45</div>
            </td>
         </tr>
         <tr>
            <td style="width: 1%">Anita</td>
            <td>
               <div style="text-align: center;width: 41%;color: #ffff00;background-color: #0000ff;">36</div>
            </td>
         </tr>
      </table>
   </body>
</html>

编辑:您还可以通过使用 CSS 类来清理样式表并进行一些输出...

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:strip-space elements="*"/>

  <!--This is easier in XSLT 2.0:
  <xsl:variable name="maxPoints" select="max(/*/kandidat/punkte)"/>
  -->
  <xsl:variable name="maxPoints">
    <xsl:for-each select="/*/kandidat">
      <xsl:sort select="punkte" order="descending"/>
      <xsl:if test="position() = 1">
        <xsl:value-of select="punkte"/>
      </xsl:if>
    </xsl:for-each>
  </xsl:variable>

  <xsl:template match="auswertung">
    <html>
      <head>
        <title>Kandidaten</title>
        <style type="text/css">
          .name {
            width: 10%;
          }
          .punkte {
            text-align: center;
            color: #ffff00;
            background-color: #0000ff;
          }
          table.kandidat {
            width: 100%;
          }
        </style>
      </head>

      <body>
        <h1>Kandidaten und ihre Punkte</h1>
        <hr/>
        <table class="kandidat">
          <xsl:apply-templates select="kandidat">
            <xsl:sort select="punkte" order="descending"/>
          </xsl:apply-templates>
        </table>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="kandidat">
    <tr>
      <td class="name">
        <xsl:value-of select="name"/>
      </td>
      <td>
        <div style="width: {round(punkte div $maxPoints * 100)}%;"
          class="punkte">
          <xsl:value-of select="punkte"/>
        </div>         
      </td>                           
    </tr>
  </xsl:template>

关于css - 使用 xslt 创建可变长度的梁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41942835/

文章推荐： javascript - 动画 Accordion 背景

文章推荐： html - 在 bootstrap 列中居中输入

文章推荐： php - 在php中设置图片的宽度和高度

文章推荐： java - 如何在Java中将分割后的字符串存储为数组？

f# - 类型定义中的“可变”
为什么禁用类型像 type t = A of int | B of string * mutable int 虽然允许此类类型: type t = A of int | B of string * i
Python 可变 NamedTuple
我正在寻找一种类似结构的数据结构，我可以从中创建多个实例并具有某种类型提示而不是不可变的。所以我有这样的东西: class ConnectionConfig(NamedTuple): nam
Swift:间接访问/可变
我需要转到引用的结构: class SearchKnot { var isWord : Bool = false var text : String = "" var to
javascript - 可变/词法环境
如sec 10.4.3中所述当控制进入执行时，执行以下步骤功能对象F（调用者）中包含的功能代码的上下文提供thisArg，而调用方提供argumentsList：如
iphone - 使用事件指示器和标签显示警报(可变)
i make a game that start display Activity indicator And activity indicator bottom display UiLable wi
Scala - 可变(var)方法参数引用
编辑:我在这里不断获得支持。只是为了记录，我认为这不再重要。自从我发布它以来我就不再需要它了。我想在 Scala 中执行以下操作... def save(srcPath: String, destP
hash - 可变 HashMap 键是一种危险的做法吗？
使用可变对象作为 Hashmap 键是一种不好的做法吗？当您尝试使用已修改足以更改其哈希码的键从 HashMap 中检索值时，会发生什么？例如，给定 class Key { int a; /
kotlin - Kotlin(可变)列表
如果您在Kotlin中访问List类型的Java值，则将获得(Mutable)List!类型。例如。: Java代码: public class Example { public stati
python - 可变 str 类扩展
我编写了 str 类(内置)的以下扩展，以便执行以下操作:假设我有字符串 "Ciao" ，通过做"Ciao" - "a"我想要的结果是字符串 "Cio" 。这是执行此操作的代码，并且运行良好: cla
hash - 可变 HashMap 键是一种危险的做法吗？
使用可变对象作为 Hashmap 键是一种不好的做法吗？当您尝试使用已修改足以更改其哈希码的键从 HashMap 中检索值时，会发生什么？例如，给定 class Key { int a; /
SQL 数据库规范化和外键实践(可变/空白键？)
我正在为我的公司设计一个数据库来管理商业贷款。每笔贷款都可以有担保人，可以是个人或公司，在借款业务失败时作为财务支持。我有 3 个表:Loan、Person 和 Company，它们存储明显的信息。
c# - 可变 F# 记录的二进制序列化
我使用二进制序列化从 C# 类中保存 F# 记录。一切正常: F#: type GameState = { LevelStatus : LevelStatus
java - 对齐系统输出中的双(可变)列
import javax.swing.JOptionPane; public class HW { public static void main(String[] args) { Strin
c++ - 可变 FlatBuffers ，性能损失？
使用 flatbuffer mutable 有多少性能损失？是否“正确”使用 FlatBuffers 来拥有一个应该可编辑的对象/结构(即游戏状态) 在我的示例中，我现在有以下类: class Ga
c++ - 可变 lambda 是否有自己的捕获值拷贝？
std::function create_function (args...) { int x = initial_value (args...); return [x] () mut
C++ - 如何在字符串中查找(可变)字符？
我需要在 for 循环中找到用户输入的字符。我通常会这样做如果(句子[i] == 'e') 但是因为在这里，'e' 将是一个单字母字符变量，我不知道如何获取要比较的值。我不能只输入 if (sent
rust - 可变 Vector 中引用的生命周期
我有一个这样的算法: let seed: Foo = ... let mut stack: Vec = Vec::new(); stack.push(&seed); while let Some(ne
for-loop - 如何循环特定(可变)次数？
这个问题可能看起来非常基础，但我很难弄清楚如何做。我有一个整数，我需要使用 for 循环来循环整数次。首先，我尝试了—— fn main() { let number = 10; // An
rust - 如何解构元组以使绑定(bind)可变？
如果我有以下结构: struct MyStruct { tuple: (i32, i32) }; 以及以下函数: // This will not compile fn function(&mut s
mysql - 可变 SQL 列默认值
我希望在每个 session 的基础上指定列的默认值。下面的脚本不起作用，但描述了我想如何使用它。我目前使用的是 MySQL 5.5.28，但如果需要可以升级。 CREATE TABLE my_tbl

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 使用 xslt 创建可变长度的梁