使用 Java 在样式表中展开全部或全部折叠

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

查看这个帖子。

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。

希望对你有帮助。

Answer 2

如果可行，试试这个。

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