Javascript可折叠列表和xsl

时间:2014-08-27 14:20:08

标签: javascript xml xslt xpath

这是我的XSL代码:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions">
  <xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html>
    <script src="outputjs.js"></script>
    <head>
    <style type="text/css">
        .pass {text-align: center; vertical-align: top; color: green; }
        .fail {text-align: center; vertical-align: top; color: red; }
    </style>
    </head>
    <body>
        <h2>Test Results</h2>
        <table border="1">
          <thead>
            <tr>
              <th style="text-align: left;">Test</th>
              <th>Pass</th>
              <th>Failure</th>
              <th>Error</th>
            </tr>
          </thead>
          <tbody>
            <xsl:for-each select="testResults/testResult">
              <tr>
                <td style="text-align: left;">
                    <a href="javascript: void(0);" onClick="toggle('items')"><xsl:value-of select="substring-before(@id,&quot;(&quot;)"/></a>
                    <div id="items" style="display:none;">
                         <xsl:for-each select="trace/step">
                         <xsl:value-of select="action"/>
                         <br/>
                         </xsl:for-each>
                    </div>
                    </td>
                <td class="pass">
                <xsl:choose>
                  <xsl:when test="count(@result[.=&quot;PASS&quot;])">
                    O
                  </xsl:when>
                  <xsl:otherwise>

                  </xsl:otherwise>
                </xsl:choose>
                </td>
                <td class="fail">
                <xsl:choose>
                  <xsl:when test="count(@result[.=&quot;FAILURE&quot;])">
                    X
                  </xsl:when>
                  <xsl:otherwise>

                  </xsl:otherwise>
                </xsl:choose>
                </td>
                <td class="fail">
                <xsl:choose>
                  <xsl:when test="count(@result[.=&quot;ERROR&quot;])">
                    X
                  </xsl:when>
                  <xsl:otherwise>

                  </xsl:otherwise>
                </xsl:choose>
                </td>
              </tr>
            </xsl:for-each>
          </tbody>
          <tfoot>
            <tr>
              <th style="text-align: left;">Total</th>
              <th style="text-align: center;"><xsl:value-of select="count(testResults/testResult[@result=&quot;PASS&quot;])"/></th>
              <th style="text-align: center;"><xsl:value-of select="count(testResults/testResult[@result=&quot;FAILURE&quot;])"/></th>
              <th style="text-align: center;"><xsl:value-of select="count(testResults/testResult[@result=&quot;ERROR&quot;])"/></th>
            </tr>
          </tfoot>
        </table>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

这是我的javascript代码:

function toggle(obj) {
    var obj=document.getElementById(obj);
    if (obj.style.display == "block") obj.style.display = "none";
    else obj.style.display = "block";
}

以下是我在浏览器中运行的XML代码:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="output.xsl"?>
<testResults>
<testResult endTime="1409040996817" id="Test 1(hello)" result="PASS" startTime="1409040974962">
    <trace>
        <step id="1" timestamp="1409040983154">
            <action>page action: click</action>
            <element>Home Page: Search Button</element>
            <parameter/>
        </step>
        <step id="2" timestamp="1409040983594">
            <action>page action: set text</action>
            <element> Home Page: Search Input Text</element>
            <parameter>bike</parameter>
        </step>
        <step id="3" timestamp="1409040987677">
            <action>page action: click</action>
            <element>Results Page: Top Item</element>
            <parameter/>
        </step>
        <step id="4" timestamp="1409040995052">
            <action>page action: Get an attributes value from an element</action>
            <element>Item Page: Price Text</element>
            <parameter/>
        </step>
    </trace>
</testResult>

<testResult endTime="1409040827762" id="Test 2(hello)" result="ERROR" startTime="1409040786110"><trace><step id="1" timestamp="1409040792321"><action>page action: navigate to</action><element/><parameter>http://www.buystuff.com/</parameter></step><step id="2" timestamp="1409040794466"><action>page action: set text</action><element>Home Page: Search Input Text</element><parameter>bike</parameter></step><step id="3" timestamp="1409040827687"><action>error: Error communicating with the remote browser. It may have died.
Build info: version: 'unknown', revision: 'unknown', time: 'unknown'
System info: host: 'Apeldoorn.local', ip: '10.0.1.7', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9.4', java.version: '1.7.0_45'
Driver info: driver.version: RemoteWebDriver
org.openqa.selenium.remote.UnreachableBrowserException: Error communicating with the remote browser. It may have died.
Build info: version: 'unknown', revision: 'unknown', time: 'unknown'
System info: host: 'Apeldoorn.local', ip: '10.0.1.7', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9.4', java.version: '1.7.0_45'
Driver info: driver.version: RemoteWebDriver
</action><element/><parameter/></step></trace></testResult>
</testResults>

当我扩展&#34;测试1&#34;它很好并且显示了动作字符串,但是当我展开&#34;测试2&#34;它扩展了&#34;测试1&#34;再次而不是&#34;测试2&#34;。 我认为问题可能与我在XLS代码中的语法有关,在它开始的时候

<xsl:for-each select="testResults/testResult">

对不起它啰嗦了,有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

替换

                <a href="javascript: void(0);" onClick="toggle('items')"><xsl:value-of select="substring-before(@id,&quot;(&quot;)"/></a>
                <div id="items" style="display:none;">

                <a href="javascript: void(0);" onclick="toggle('{generate-id()}')"><xsl:value-of select="substring-before(@id,&quot;(&quot;)"/></a>
                <div id="{generate-id()}" style="display:none;">

为不同的div元素提供不同的唯一id属性值。

相关问题