Question

我有许多XML文件，我想将它们创建为HTML文件，然后显示结果表。然后我使用一个xsl:elemnt来创建表格的单元格：

<table>
    <col span="1" class="firstCol" />
    <thead align="center">
        <tr class="headerColor" >
            <th style="text-align: left" class="Test" >Test</th>
            <th > Start </th>
            <th > End </th>
            <th > Duration </th>
        </tr >
        <tr style="border: 2px solid black" class="fristRow" onclick="CollapseExpandAll(this)" title="Click here to collapse/expand">
            <td align="left">
                <b> 
                    <xsl:value-of select="attribute::name"/>                            
                </b>
            </td>
        </tr>
    </thead>
    <xsl:element name="tableRows">
        <xsl:attribute name="id">
            <xsl:value-of select="attribute::name"/>
        </xsl:attribute>
        <xsl:apply-templates/>
    </xsl:element>
</table>

使用此JavaScript代码：

<script type="text/javascript" language="JavaScript" >
    function CollapseExpandAll(obj)
        {
            var tableRows = obj.parentNode.parentNode.parentNode.getElementsByTagName("tableRows")[0];
            var old = tableRows.style.display;
            tableRows.style.display = (old == "none"?"":"none");
        }
</script>

这段代码通过单击第二行分别展开/折叠一个表是什么。我想要的是让一个按钮完成所有作业，或者同时展开所有以HTML格式创建的表格（不是通过单击每个表格）。我通过互联网搜索并找到了很好的例子，但我不知道如何根据我的情况对它们进行本地化。（例如this question）。我可以请你帮忙吗？非常感谢提前!!

更新

以下是我的XML文件的示例

<SquishReport version="2.1" xmlns="http://www.froglogic.com/XML2">
    <test name="tst_main">
        <test name="tst_start_app">
            <description>  CDATA </description>
        </test>
        <test name="tst2">
            <description>  CDATA </description>
        </test>
    </test>
    <test name="tst_main2">
        <test name="tst3">
            <description>  CDATA </description>
        </test>
        <test name="tst4">
            <description>  CDATA </description>
        </test>
        <test name="tst5">
            <description>  CDATA </description>
        </test>
        <test name="tst6">
            <description>  CDATA </description>
        </test>
    </test>
    <test name="tst_main3">
        <test name="tst7">
            <description>  CDATA </description>
        </test>
        <test name="tst8">
            <description>  CDATA </description>
        </test>
        <test name="tst9">
            <description>  CDATA </description>
        </test>
    </test>
</SquishReport>

对于每个test_main我想单独一个表，然后我的HTML文件中会有三个表。

Answer 1

如果有效，请尝试此操作。

$('.fristRow').click(function(){
    $('.fristRow').slideToggle(1000);
});

Answer 2

见这个帖子。

How can I expand and collapse a <div> using javascript?

在您的情况下，您需要向表中添加一个类（如果您希望整个表获得效果）。代码将是这样的：

HTML：

<table class="tableClass">
<col span="1" class="firstCol" />
<thead align="center">
    <tr class="headerColor" >
        <th style="text-align: left" class="Test" >Test</th>
        <th > Start </th>
        <th > End </th>
        <th > Duration </th>
    </tr >
    <tr style="border: 2px solid black" class="fristRow" onclick="CollapseExpandAll(this)" title="Click here to collapse/expand">
        <td align="left">
            <b> 
                <xsl:value-of select="attribute::name"/>                            
            </b>
        </td>
    </tr>
</thead>
<xsl:element name="tableRows">
    <xsl:attribute name="id">
        <xsl:value-of select="attribute::name"/>
    </xsl:attribute>
    <xsl:apply-templates/>
</xsl:element>

使用Javascript：

<script type="text/javascript" language="JavaScript" >
    $(".tableClass").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});
</script>

请注意，在这种情况下，您需要在项目中使用JQuery。

希望它有所帮助。

使用Java

2 个答案: