Question

我有一个XML文件，其中包含主队和客队的数据，主要是主队，谁是客队以及他们的分数以及比赛的状态。

我正在尝试使用在XSL中创建的表和select事件，然后显示从下拉菜单中选择的团队的细节。 IE如果你选择Blue Jays，它会在他们的日程表上显示5个游戏，如果他们已经玩过或者没玩过。

XML文件结构是

 <ROOT>
      <TEAMS>
          <team>
      </TEAMS>

      <GAME>
          <home>
          <away>
          <home_score>
          <away_score>
      </GAME>
 </ROOT>

在我的XSL文件中我有以下

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" omit-xml-declaration="yes" />
<xsl:template match="/ROOT">
    <table class="listing">
        <tr>select the team and press the Submit Team button</tr>
        <tr><th>Team</th>
            <td><select name="Team" class="listing" id="list" onchange=<xsl:apply-templates select="team" />
                <xsl:for-each select="TEAMS/team">
                    <option>
                        <xsl:value-of select="." />
                    </option>
                </xsl:for-each>
            </select>
            </td>
        </tr>

    </table>
</xsl:template>
        <xsl:template match="team">
    <select>
            <xsl:value-of select="Team" />
    </select>
</xsl:template>
    </xsl:stylesheet>

然后在HTML文件中，我在正文中加载init（）函数。

    function init()
    {
        var listElem=document.getElementById("list");
        listElem.innerHTML=runTransform(xmlDoc,xsltTeamDoc);


    }

我试图弄清楚我是否可以在XSL中为“onchange”调用另一个模板，或者在javascript中调用可以完成工作的函数。这是我被困的地方。如何在javascript中完成？

然后显示

<form name="sForm">
    <div id="list"></div>
</form>

Answer 1

你在这里与这些技术混淆了。 javascript“onchange”事件无法调用XSL模板，或者XSL无法在浏览器中调用javascript函数。这两件事不能同时运行。您正在调用一个函数，使用XSLT将XML转换为HTML，但是一旦完成转换，XSLT就不再运行了。 HTML出现在浏览器中时已经消失了。浏览器将以与最初在文本编辑器中手动编写的方式相同的方式处理HTML。

现在，您可以做的是在单独的 div 标记中写出团队信息，这些标记将使用CSS样式隐藏。所以，它们会在页面上，但不可见。然后，“onchange”事件会根据所选的团队显示这些 div 标记。

所以，首先创建一个匹配团队的模板，然后根据需要输出游戏

<xsl:template match="Team">
    <div id="team-{.}" style="display:none">
            <xsl:apply-templates select="//GAME[home=current()]" />
    </div>
</xsl:template>

请注意 div 如何根据团队名称获得ID以进行唯一标识。

然后，在创建 table 元素的现有代码之后，您将调用此模板来呈现所有团队的所有div。

<xsl:apply-templates select="TEAMS/Team" />

然后，选择的“onchange”事件将由javascript组成，以显示相关的 div

<select name="Team" class="listing" id="list" 
        onchange="document.getElementById('team-' + this.value).style.display='block'">

理想情况下，你会在这里使用jquery，但这纯粹是为了证明原理。

试试这个XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" omit-xml-declaration="yes" />
<xsl:template match="/ROOT">
    <table class="listing">
        <tr>select the team and press the Submit Team button</tr>
        <tr><th>Team</th>
            <td><select name="Team" class="listing" id="list" onchange="document.getElementById('team-' + this.value).style.display='block'">
                <option>Choose Team</option>
                <xsl:for-each select="TEAMS/Team">
                    <option value="{.}">
                        <xsl:value-of select="." />
                    </option>
                </xsl:for-each>
            </select>
            </td>
        </tr>
    </table>
   <xsl:apply-templates select="TEAMS/Team" />
   </xsl:template>

   <xsl:template match="Team">
      <div id="team-{.}" style="display:none">
          <xsl:apply-templates select="//GAME[home=current()]" />
      </div>
   </xsl:template>

   <xsl:template match="GAME">
      Date:<xsl:value-of select="Date" />
   </xsl:template>
</xsl:stylesheet>

这显然仍需要很多工作，但它应该指向正确的方向。

根据onchange下拉列表中的选择显示XML数据

1 个答案: