Question

您好我正在尝试使用XSL创建包含表的产品网格，因为稍后它可能会用在新闻稿上。

我希望表动态增加行但我希望它有3个单元格。

我已经对这个做了一个不错的尝试

XSL：

<?xml version="1.0" encoding="utf-8"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
  <title>Product Grid</title>
  <style>
  td {font-family: Verdana; font-size:12px;min-width:100px;}
   </style>
  </head>
  <body style="font-family: Verdana; font-size:10px;">
  <h2>Products</h2>
    <table border="1">
        <xsl:for-each select="credentials/host"> 
            <xsl:if test="position() mod 3 = 1">
                <xsl:text>test</xsl:text>
            </xsl:if>

            <td>
                <p><img><xsl:attribute name="src"><xsl:value-of select='imgsource'/></xsl:attribute></img></p>
                <p><xsl:value-of select='productname'/></p>
                <p><xsl:value-of select="position()" /></p>
            </td>
        </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

正如你可以看到在3 tds之后做某事的条件是对的，但我不知道如何在那里创建一个新行。如果我在循环中打开tr并尝试仅在条件为真时关闭它我会收到错误。

我的测试XML文件是这样的：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="first_try.xsl"?>
<credentials xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <host>
        <productid>12312322</productid>
        <productname>sg230</productname>
        <category>tablets</category>
        <name>Name1</name>
        <details>Wifi</details>
        <price>100</price>
        <imgsource>imageurl</imgsource>
    </host>
    <host>
        <productid>2223134</productid>
        <productname>qe256</productname>
        <category>netbooks</category>
        <name>name2</name>
        <details>3G</details>
        <price>123</price>
        <imgsource>imageurl</imgsource>
    </host>
    <host>
        <productid>334213452</productid>
        <productname>er675</productname>
        <category>mobile phones</category>
        <name>name3</name>
        <details>Bluetooth</details>
        <price>80</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>34234</productid>
        <productname>sd54</productname>
        <category>games</category>
        <name>name4</name>
        <details>Retina</details>
        <price>1222</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>245432523</productid>
        <productname>sh1132</productname>
        <category>PC</category>
        <name>name5</name>
        <details>i7</details>
        <price>2234</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>5234523345</productid>
        <productname>kle500</productname>
        <category>Mac</category>
        <name>name6</name>
        <details>i5</details>
        <price>3333</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>2342</productid>
        <productname>gs650</productname>
        <category>PC</category>
        <name>name7</name>
        <details>AMD</details>
        <price>4444</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>1231</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host/>
    <host/>
</credentials>

所需的输出如下：

<tr>
  <td>
    <p> Product Name 1 </p>
    <p> Image 1 </p>
    <p> Details 1</p>
  </td>

  <td>
    <p> Product Name 2 </p>
    <p> Image 2 </p>
    <p> Details 2</p>
  </td>

  <td>
    <p> Product Name 3 </p>
    <p> Image 3 </p>
    <p> Details 3</p>
  </td>
</tr>

<tr>
  <td>
    <p> Product Name 4 </p>
    <p> Image 4 </p>
    <p> Details 4</p>
  </td>

  <td>
    <p> Product Name 5 </p>
    <p> Image 5 </p>
    <p> Details 5</p>
  </td>

  <td>
    <p> Product Name 6</p>
    <p> Image 6</p>
    <p> Details 6</p>
  </td>
</tr>

<tr>
  <td>
    <p> Product Name 7 </p>
    <p> Image 7 </p>
    <p> Details 7</p>
  </td>

这将继续动态..

非常感谢您提前的时间。

比尔。

Answer 1

请尝试以下代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <html>
            <head>
                <title>Product Grid</title>
                <style>
  td {font-family: Verdana; font-size:12px;min-width:100px;}
   </style>
            </head>
            <body style="font-family: Verdana; font-size:10px;">
                <h2>Products</h2>
                <table border="1">
                    <xsl:for-each select="credentials/host">
                        <xsl:if test="position() mod 3 = 1">
                            <tr>
                                <xsl:apply-templates select=".|following-sibling::host[position() &lt; 3]" mode="row"/>
                            </tr>
                        </xsl:if>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="host" mode="row">
        <td>
            <p><img><xsl:attribute name="src"><xsl:value-of select='imgsource'/></xsl:attribute></img></p>
            <p><xsl:value-of select='productname'/></p>
            <p><xsl:value-of select="position()" /></p>
        </td>
    </xsl:template>
</xsl:stylesheet>

这是改编自Tim C（XSLT split result in groups of 3）

带产品的XSL Image Grid

1 个答案: