在HTML文件中的值显示上设置Click事件，并希望在其中显示子元素

Question

这是我的xml文件：-

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="final.xsl"?>  
  <root>
    <child1 entity_id = "1" value= "Asia">
        <child2 entity_id = "2" value = "india">
            <child3 entity_id = "3" value = "Gujarat">
                <child5 entity_id = "5" value ="Rajkot"></child5>
            </child3>
            <child4 entity_id = "4" value = "Rajshthan">
                <child6 entity_id = "6" value = "Ajmer"></child6>
            </child4>
        </child2>
    </child1>
    </root>

这是我的XSLT文件：

<xsl:template match="*">
    <xsl:for-each select="//child2">
    <xsl:value-of select="*"/>
    <xsl:value-of select="@value" />    
</xsl:for-each>

这是我的html代码：

<script>
function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

function displayResult()
{
    xml=loadXMLDoc("final.xml");
    xsl=loadXMLDoc("books05.xsl");
    // code for IE
    if (window.ActiveXObject)
    {
        xml.addParameter("rss", test); 
        ex=xml.transformNode(xsl);
        document.getElementById("load").innerHTML=ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
        xsltProcessor=new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml,document);
        document.getElementById("load").appendChild(resultDocument);
    }
}
</script>
<body onload="displayResult()">
<div id="load" />
</body>

输出为：-

India

现在，我想在印度设置点击事件...单击印度，然后显示诸如Gujarat和Rajshthan之类的Child元素...在显示Gujarat和Rajshthan时隐藏印度...

Answer 1

这应该工作。 首先，您可以这样定义XSLT：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" omit-xml-declaration="yes"/>
  <xsl:param name="selected" />

  <xsl:template match="/*" priority="2">
    <xsl:apply-templates select="*[not($selected)] | //*[@entity_id = $selected]/*" />
  </xsl:template>

  <xsl:template match="*[*]">
    <span onclick="displayResult('{@entity_id}');">
      <xsl:call-template name="ItemText" />
    </span>
  </xsl:template>

  <xsl:template match="*" name="ItemText">
    <xsl:value-of select="concat(@value, '&#xA0;')"/>
  </xsl:template>
</xsl:stylesheet>

当它不带任何参数运行时，它会生成一个顶级项目列表，并带有onclick处理函数，以使用自己的entity_id调用JavaScript函数：

<span onclick="displayResult('1');">Asia </span>

当以entity_id作为selected参数的值运行时，它将返回具有该实体id的项的子项的列表：

<span onclick="displayResult('3');">Gujarat </span>
<span onclick="displayResult('4');">Rajshthan </span>

然后，您可以像这样编写HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script>
        var xml = loadXMLDoc("final.xml");
        var xsl = loadXMLDoc("books05.xsl");

        function loadXMLDocActiveX(location) {
            var doc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
            doc.async = false;
            doc.load(location);
            return doc;
        }

        function loadXMLDocOther(location) {
            xhttp = new XMLHttpRequest();
            xhttp.open("GET", location, false);
            xhttp.send("");
            return xhttp.responseXML;
        }

        function loadXMLDoc(dname) {
            if (window.ActiveXObject) {
                return loadXMLDocActiveX(dname);
            }
            else if (window.XMLHttpRequest) {
                return loadXMLDocOther(dname);
            }
        }

        function transformActiveX(xml, xsl, target, selected) {
            var transform = new ActiveXObject("MSXML2.XSLTemplate");
            transform.stylesheet = xsl;
            var processor = transform.createProcessor();
            processor.input = xml;

            if (selected) {
                processor.addParameter("selected", selected);
            }

            processor.transform();
            target.innerHTML = processor.output;
        }

        function transformOther(xml, xsl, target, selected) {
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xsl);

            if (selected) {
                xsltProcessor.setParameter(null, "selected", selected);
            }

            var resultDocument = xsltProcessor.transformToFragment(xml, document);
            target.innerHTML = "";
            target.appendChild(resultDocument);
        }

        function displayResult(selected) {
            var targetElement = document.getElementById("load");

            // code for IE
            if (window.ActiveXObject) {
                transformActiveX(xml, xsl, targetElement, selected);
            }
            // code for Mozilla, Firefox, Opera, etc.
            else if (document.implementation && 
                     document.implementation.createDocument) {
                transformOther(xml, xsl, targetElement, selected);
            }
        }
    </script>
</head>
<body onload="displayResult()">
    <div id="load">
    </div>
</body>
</html>

请注意， displayResult()函数现在如何具有一个参数，并且当此参数具有值时，它将把该值作为XSLT参数传递给XSLT。

那应该做！

在HTML文件中的值显示上设置Click事件，并希望在其中显示子元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-02-09 15:19:32

在HTML文件中的值显示上设置Click事件，并希望在其中显示子元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-02-09 15:19:32

解决方案1
1 已采纳 2013-02-09 15:19:32