尝试将一些javascript添加到xslt文件，以便可以隐藏或显示该表

时间：2014-03-25 15:11:46

标签： javascript html xml xslt xslt-1.0

这是我的第一个问题。对不起，如果这是一个愚蠢的，但我一直试图这样做，整个下午没有任何快乐。

我有一些看起来像这样的XML

XML：

    <?xml version="1.0"?>
    <?xml-stylesheet type='text/xsl' href='style.xslt'?>
    <LogFileProcessing>
    <Test>
    <Script>
        <Name>Test 1</Name>
        <Results>
            <RunResult>
                <RunNumber>1</RunNumber>
                <Outcome>Pass</Outcome>
                <StartTime>10:42:25</StartTime>
                <EndTime>10:43:58</EndTime>
                <Date>25/03/2014</Date>
                <Duration>93 seconds</Duration>
            </RunResult>
            <RunResult>
                <RunNumber>2</RunNumber>
                <Outcome>Pass</Outcome>
                <StartTime>10:44:03</StartTime>
                <EndTime>10:45:13</EndTime>
                <Date>25/03/2014</Date>
                <Duration>70 seconds</Duration>
            </RunResult>
        </Results>
    </Script>
    <Script>
        <Name>Test 2</Name>
        <Results>
            <RunResult>
                <RunNumber>1</RunNumber>
                <Outcome>Pass</Outcome>
                <StartTime>10:45:17</StartTime>
                <EndTime>10:46:37</EndTime>
                <Date>25/03/2014</Date>
                <Duration>80 seconds</Duration>
            </RunResult>
            <RunResult>
                <RunNumber>2</RunNumber>
                <Outcome>Pass</Outcome>
                <StartTime>10:46:41</StartTime>
                <EndTime>10:47:49</EndTime>
                <Date>25/03/2014</Date>
                <Duration>68 seconds</Duration>
            </RunResult>
        </Results>
    </Script>
</Test>

这是我用来转换它的xsl文件

    <?xml version="1.0" encoding="UTF-8"?>
        <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
        <xsl:for-each select="LogFileProcessing/Test/Script">
            <div style="font-family:Arial;background-color:teal;color:white;padding:4px">
            <span style="font-family:Arial;font-weight:bold"><xsl:value-of select="Name"/></span>
            </div>
            <div style="font-family:Arial;margin-left:75px;margin-bottom:1em;font-size:10pt">
            <p>
        <table border="1">
                <tr style="color:white" bgcolor="Teal">
                <th>Run</th>
      <th>Date</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Duration</th>
      <th>Pass/Fail</th>
      <th>Reason</th>
    </tr>
    <xsl:for-each select="Results/RunResult">
    <tr>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="RunNumber"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="RunNumber"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Date"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Date"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="StartTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="StartTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="EndTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="EndTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Duration"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Duration"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Outcome"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Outcome"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="FailureReason"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><span>N/A</span></td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    </xsl:for-each>
  </table>
  </p>
  </div>
</xsl:for-each>
</body>
</html>

我确信有更好的方法可以实现上述目标，但我想要做的是有一个链接，最好是在每个名称行上显示或隐藏直接显示在其下方的表格。< / p>

我尝试了document.style.display not sticking for some reason

的内容

和

http://p2p.wrox.com/xslt/55403-hiding-showing-table-html-through-xslt.html

但作为编码，XML和XSL世界的菜鸟，我有点迷失。感谢任何帮助，并转发我对此主题的理解。

由于

1 个答案:

答案 0 :(得分：0)

HTML5可以在没有Javascript的情况下使用details和summary元素执行此操作：

        <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <head>
          <title>Test</title>
        </head>
        <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
        <xsl:for-each select="LogFileProcessing/Test/Script">
          <details>
            <summary style="font-family:Arial;background-color:teal;color:white;padding:4px">

            <span style="font-family:Arial;font-weight:bold"><xsl:value-of select="Name"/></span>
            </summary>
            <div style="font-family:Arial;margin-left:75px;margin-bottom:1em;font-size:10pt">

        <table border="1">
                <tr style="color:white" bgcolor="Teal">
                <th>Run</th>
      <th>Date</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Duration</th>
      <th>Pass/Fail</th>
      <th>Reason</th>
    </tr>
    <xsl:for-each select="Results/RunResult">
    <tr>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="RunNumber"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="RunNumber"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Date"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Date"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="StartTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="StartTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="EndTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="EndTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Duration"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Duration"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Outcome"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Outcome"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="FailureReason"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><span>N/A</span></td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    </xsl:for-each>
  </table>
  </div>
  </details>
</xsl:for-each>
</body>
</html>

不幸的是，看起来这些元素的支持在Chrome和Opera和Safari中，而Firefox和IE只提供它们但不支持交互性。因此，对于那些没有实现这些元素的浏览器，我们需要Javascript：

<?xml version="1.0" encoding="UTF-8"?>
        <html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <head>
          <title>Test</title>
          <script><![CDATA[
          function toggle(summary) {
            var details = summary.parentNode;
            if (details.nodeType === 1 && details.tagName.toLowerCase() === 'details')
            {
              if (typeof details.open === 'undefined')
              {
                var div = details.getElementsByTagName('div')[0];
                if (div) {
                  div.style.display = div.style.display === '' ? 'none' : '';
                }
              }
            }
          }
          ]]></script>
          <style>details { display: block;}</style>
        </head>
        <body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
        <xsl:for-each select="LogFileProcessing/Test/Script">
          <details>
            <summary style="font-family:Arial;background-color:teal;color:white;padding:4px" onclick="toggle(this);">

            <span style="font-family:Arial;font-weight:bold"><xsl:value-of select="Name"/></span>
            </summary>
            <div style="font-family:Arial;margin-left:75px;margin-bottom:1em;font-size:10pt">

        <table border="1">
                <tr style="color:white" bgcolor="Teal">
                <th>Run</th>
      <th>Date</th>
      <th>Start Time</th>
      <th>End Time</th>
      <th>Duration</th>
      <th>Pass/Fail</th>
      <th>Reason</th>
    </tr>
    <xsl:for-each select="Results/RunResult">
    <tr>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="RunNumber"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="RunNumber"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Date"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Date"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="StartTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="StartTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="EndTime"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="EndTime"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Duration"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Duration"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="Outcome"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><xsl:value-of select="Outcome"/></td>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:choose>
        <xsl:when test="Outcome = 'Fail'">
          <td bgcolor="Red">
          <xsl:value-of select="FailureReason"/>
          </td>
        </xsl:when>
        <xsl:otherwise>
          <td bgcolor="White"><span>N/A</span></td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    </xsl:for-each>
  </table>
  </div>
  </details>
</xsl:for-each>
</body>
</html>

有关示例，请参阅http://home.arcor.de/martin.honnen/xslt/test2014032503.xml。

相关问题
最新问题