Javascript 扩展/折叠xslt中的嵌套节点

我有一个以下格式的xml

<BasePeriod>
.
.
.
.
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart1 </substart>
       <subend> subend1 </subend>
    </subperiod>
    <type> abc1 </type>
</Period>
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart2 </substart>
       <subend> subend2 </subend>
    </subperiod>
    <type> abc2 </type>
</Period>
<Period>
    <start> stdate1 </start>
    <end> endate1 </end>
    <subperiod>
       <substart> substart3 </substart>
       <subend> subend3 </subend>
    </subperiod>
    <type> abc3 </type>
</Period>
</BasePeriod>

.
.
.
.
stdate1
endate1
亚基1
子端1
abc1
stdate1
endate1
亚基2
亚端2
abc2
stdate1
endate1
亚基3
亚端3
abc3

我想做的是——当我打开html时，将句点和子句点折叠起来，然后在单击它时展开它们

我有以下xslt：

<xsl:for-each select="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
    </td>
    <td>
        <a href="javascript:expandIt(per_expand{position()}), period_expand{position()}" name="period_expand{position()}" class="expandit">Periods</a>
        <div id="per_expand{position()}" style="display:none;" >
            <table>
                <thead>
                <tr>
                    <th>
                        Start Date
                    </th>
                    <th>
                        End Date
                    </th>
                    <th>
                        Sub Periods
                    </th>
                    <th>
                        Type
                    </th>
                </tr>
                </thead>
                <xsl:for-each select="Period">
                    <tr>
                        <td>
                            <xsl:value-of select="start"/>
                        </td>
                        <td>
                            <xsl:value-of select="end"/>
                        </td>
                        <td>
                            <a href="javascript:expandIt(subper_expand{position()}), subperiod_expand{position()}" name="subperiod_expand{position()}" class="expandit">Sub Periods</a>
                            <div id="subper_expand{position()}" style="display:none;" >
                                <table>
                                    <tr>
                                        <th >
                                            Start Date
                                        </th>
                                        <th >
                                            End Date
                                        </th>
                                    </tr>
                                    <xsl:for-each select="subperiod">
                                        <tr>
                                            <td>
                                                <xsl:value-of select="substart"/>
                                            </td>
                                            <td>
                                                <xsl:value-of select="subend"/>
                                            </td>
                                        </tr>
                                    </xsl:for-each>
                                </table>
                            </div>
                        </td>
                        <td>
                            <xsl:value-of select="type"/>
                        </td>
                    </tr>
                </xsl:for-each>
            </table>
        </div>
    </td>
</tr>
</xsl:for-each>

<script language="JavaScript">
function expandIt(whichEl, link) {
    whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
    if ( link ) { 
         if ( link.innerHTML ) {
            if ( whichEl.style.display == "none" ) {
                  link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
               } else {
                  link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
               }
         }
     }
 }
 </script>

开始日期
结束日期
分时段
类型
开始日期
结束日期
函数expandIt（whichEl，link）{
whichEl.style.display=（whichEl.style.display=“无”）？“”：“无”；
如果（链接）{
如果（link.innerHTML）{
如果（whichEl.style.display==“无”）{
link.innerHTML=“[+]”+link.innerHTML.substring（4）；
}否则{
link.innerHTML=“[-]”+link.innerHTML.substring（4）；
}
}
}
}

有了以上内容，我无法扩展子周期。然后我尝试将

document.getElementById（subper_expand{position（）}'）

作为第一个参数传递给

expandit

函数。这次我可以扩展子时段，但问题是，它总是指第一个时段的子时段（即使在第二个或第三个时段内单击）

有人能帮帮我吗

谢谢

将XSL分解为多个模板 最好使用多个模板，而不是一个带有“隐藏”元素的模板

基期：

<xsl:template match="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
        </td>
        <td>
            <a href="javascript:expandIt(per_expand{position()},
                per_expand{position()})"
                name="period_expand{position()}" class="expandit">Periods</a>
            <div id="per_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                        <th> Sub Periods </th>
                        <th> Type </th>
                    </tr>
                    <xsl:apply-templates select="Period"/>
                </table>
            </div>
        </td>
    </tr>

    <xsl:call-template name="expandIt"/>
</xsl:template>

<xsl:template match="Period">
    <tr>
        <td>
            <xsl:value-of select="start"/>
        </td>
        <td>
            <xsl:value-of select="end"/>
        </td>
        <td>
            <a href="javascript:expandIt(subper_expand{position()},
                subperiod_expand{position()})"
                name="subperiod_expand{position()}" 
                class="expandit">Sub Periods</a> 
            <div id="subper_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                    </tr>
                    <xsl:apply-templates select="subperiod"/>
                </table>
            </div>
        </td>
        <td>
            <xsl:value-of select="type"/>
        </td>
    </tr>
</xsl:template>

<xsl:template match="subperiod">
    <tr>
        <td>
            <xsl:value-of select="substart"/>
        </td>
        <td>
            <xsl:value-of select="subend"/>
        </td>
    </tr>
</xsl:template>

<xsl:template name="expandIt">
    <script language="JavaScript">
    function expandIt(whichEl, link) {
        whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
        if ( link ) { 
             if ( link.innerHTML ) {
                if ( whichEl.style.display == "none" ) {
                      link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
                   } else {
                      link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
                   }
             }
         }
     }
    </script>       
</xsl:template>

开始日期
结束日期
分时段
类型

时段：

<xsl:template match="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
        </td>
        <td>
            <a href="javascript:expandIt(per_expand{position()},
                per_expand{position()})"
                name="period_expand{position()}" class="expandit">Periods</a>
            <div id="per_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                        <th> Sub Periods </th>
                        <th> Type </th>
                    </tr>
                    <xsl:apply-templates select="Period"/>
                </table>
            </div>
        </td>
    </tr>

    <xsl:call-template name="expandIt"/>
</xsl:template>

<xsl:template match="Period">
    <tr>
        <td>
            <xsl:value-of select="start"/>
        </td>
        <td>
            <xsl:value-of select="end"/>
        </td>
        <td>
            <a href="javascript:expandIt(subper_expand{position()},
                subperiod_expand{position()})"
                name="subperiod_expand{position()}" 
                class="expandit">Sub Periods</a> 
            <div id="subper_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                    </tr>
                    <xsl:apply-templates select="subperiod"/>
                </table>
            </div>
        </td>
        <td>
            <xsl:value-of select="type"/>
        </td>
    </tr>
</xsl:template>

<xsl:template match="subperiod">
    <tr>
        <td>
            <xsl:value-of select="substart"/>
        </td>
        <td>
            <xsl:value-of select="subend"/>
        </td>
    </tr>
</xsl:template>

<xsl:template name="expandIt">
    <script language="JavaScript">
    function expandIt(whichEl, link) {
        whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
        if ( link ) { 
             if ( link.innerHTML ) {
                if ( whichEl.style.display == "none" ) {
                      link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
                   } else {
                      link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
                   }
             }
         }
     }
    </script>       
</xsl:template>

开始日期
结束日期

子时段：

<xsl:template match="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
        </td>
        <td>
            <a href="javascript:expandIt(per_expand{position()},
                per_expand{position()})"
                name="period_expand{position()}" class="expandit">Periods</a>
            <div id="per_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                        <th> Sub Periods </th>
                        <th> Type </th>
                    </tr>
                    <xsl:apply-templates select="Period"/>
                </table>
            </div>
        </td>
    </tr>

    <xsl:call-template name="expandIt"/>
</xsl:template>

<xsl:template match="Period">
    <tr>
        <td>
            <xsl:value-of select="start"/>
        </td>
        <td>
            <xsl:value-of select="end"/>
        </td>
        <td>
            <a href="javascript:expandIt(subper_expand{position()},
                subperiod_expand{position()})"
                name="subperiod_expand{position()}" 
                class="expandit">Sub Periods</a> 
            <div id="subper_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                    </tr>
                    <xsl:apply-templates select="subperiod"/>
                </table>
            </div>
        </td>
        <td>
            <xsl:value-of select="type"/>
        </td>
    </tr>
</xsl:template>

<xsl:template match="subperiod">
    <tr>
        <td>
            <xsl:value-of select="substart"/>
        </td>
        <td>
            <xsl:value-of select="subend"/>
        </td>
    </tr>
</xsl:template>

<xsl:template name="expandIt">
    <script language="JavaScript">
    function expandIt(whichEl, link) {
        whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
        if ( link ) { 
             if ( link.innerHTML ) {
                if ( whichEl.style.display == "none" ) {
                      link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
                   } else {
                      link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
                   }
             }
         }
     }
    </script>       
</xsl:template>

expandIt:

<xsl:template match="SvcPeriods/BasePeriod">
    <tr>
        <td>
            <xsl:value-of select="startDate"/>
        </td>
        <td>
            <xsl:value-of select="endDate"/>
        </td>
        <td>
            <a href="javascript:expandIt(per_expand{position()},
                per_expand{position()})"
                name="period_expand{position()}" class="expandit">Periods</a>
            <div id="per_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                        <th> Sub Periods </th>
                        <th> Type </th>
                    </tr>
                    <xsl:apply-templates select="Period"/>
                </table>
            </div>
        </td>
    </tr>

    <xsl:call-template name="expandIt"/>
</xsl:template>

<xsl:template match="Period">
    <tr>
        <td>
            <xsl:value-of select="start"/>
        </td>
        <td>
            <xsl:value-of select="end"/>
        </td>
        <td>
            <a href="javascript:expandIt(subper_expand{position()},
                subperiod_expand{position()})"
                name="subperiod_expand{position()}" 
                class="expandit">Sub Periods</a> 
            <div id="subper_expand{position()}" style="display:none;">
                <table>
                    <tr>
                        <th> Start Date </th>
                        <th> End Date </th>
                    </tr>
                    <xsl:apply-templates select="subperiod"/>
                </table>
            </div>
        </td>
        <td>
            <xsl:value-of select="type"/>
        </td>
    </tr>
</xsl:template>

<xsl:template match="subperiod">
    <tr>
        <td>
            <xsl:value-of select="substart"/>
        </td>
        <td>
            <xsl:value-of select="subend"/>
        </td>
    </tr>
</xsl:template>

<xsl:template name="expandIt">
    <script language="JavaScript">
    function expandIt(whichEl, link) {
        whichEl.style.display = (whichEl.style.display == "none" ) ? "" : "none";
        if ( link ) { 
             if ( link.innerHTML ) {
                if ( whichEl.style.display == "none" ) {
                      link.innerHTML = "[+] " + link.innerHTML.substring( 4 );
                   } else {
                      link.innerHTML = "[-] " + link.innerHTML.substring( 4 );
                   }
             }
         }
     }
    </script>       
</xsl:template>

函数expandIt（whichEl，link）{
whichEl.style.display=（whichEl.style.display=“无”）？“”：“无”；
如果（链接）{
如果（link.innerHTML）{
如果（whichEl.style.display==“无”）{
link.innerHTML=“[+]”+link.innerHTML.substring（4）；
}否则{
link.innerHTML=“[-]”+link.innerHTML.substring（4）；
}
}
}
}

---

如你所见，我改变了：

<a href="javascript:expandIt(subper_expand{position()}),
    subperiod_expand{position()}"

---

我已经看过了你的建议答案，虽然它对firefox不起作用，但总体思路还是行得通的。firefox无法使用的部分是直接引用ID（需要使用getElementById）。此外，innerHTML不是应该修改的内容，而是textContent（IE/Opera world中的innerText）。像“whichEl.style.display”这样的引用将变成“document.getElementById（whichEl.style.display）”。此外，您不应使用“名称”（除非在表单中），而应使用“id”。在1。模板，2。expandIt的参数应该是“period_expand{position（）}”。请记住添加“[+]”。