2014-02-25 35 views
0

我對球隊的數據值選擇一個團隊後,顯示遊戲信息,並且在具有以下結構試圖從下拉

<Schedule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <Teams> 
      <Team>Sandlot</Team> 
      <Team>Rangers</Team> 
      <Team>little guys</Team> 
    </Teams> 
    <Game status="Played"> 
      <Home_Team>Sandlot</Home_Team> 
      <Away_Team>Rangers</Away_Team> 
      <Date>2014-01-10</Date> 
      <Home_Team_Score>7</Home_Team_Score> 
      <Away_Team_Score>9</Away_Team_Score> 
     </Game> 
    </schedule> 

我試圖創建一個XML文件,玩的遊戲下拉列表中的所有團隊,然後選擇一個團隊時,顯示他們的所有遊戲及其細節。

我使用JavaScript來加載它看起來像這樣

<?xml version="1.0" encoding="UTF-8" ?> 

<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="/Schedule"> 
    <table class="listing"> 
     <tr><th>Team</th> 
      <td><select name="Team" class="listing" id="teamlist"> 
       <!--<xsl:apply-templates select="team" /> --> 
       <xsl:for-each select="Teams"> 
        <option> 
         <xsl:value-of select="Team" /> 
        </option> 
       </xsl:for-each> 
      </select> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" align="center"> 
       <input type="button" value="Submit Team" onclick="displayGames()" /> 
      </td> 
     </tr> 
    </table> 
</xsl:template> 
</xsl:stylesheet> 

這裏是我使用的嘗試和頁面

<script type="text/javascript"> 


    var teamL="teamlist.xsl"; 

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

    var xmlDoc=loadXMLDoc(xmlFile); 
    var xsltTeamDoc=loadXMLDoc(teamListFile); 


    function createXDoc(xFile, PID) 
    { 
      xDoc=loadXMLDoc(xFile); 
      return xDoc; 
    } 

    function runTransform(xDoc, xsltDoc) { 

      var xProcessor = new XSLTProcessor(); 
      xProcessor.importStylesheet(xsltDoc); 
      var resultDoc = xProcessor.transformToDocument(xDoc); 
      var serializer = new XMLSerializer(); 
      var resultStr = serializer.serializeToString(resultDoc); 
      return resultStr; 
    } 
    function init() 
    { 
     var teamListElem=document.getElementById("teamlist"); 
     teamListElem.innerHTML=runTransform(xmlDoc,xsltTeamDoc); 
    } 
</script> 

當頁面加載上顯示它的JavaScript的樣式表,初始化函數運行並顯示id「teamlist」

<body onload="init()"> 

    <form name="sForm"> 
<div id="teamlist"></div> 
</form> 
</body> 

我還需要繼續工作創建一個函數來執行計算以顯示信息。

我目前的問題是我無法得到下拉以包含超過「團隊」元素中的第一隊。

回答

0

第一個問題是您的計劃XML文檔格式錯誤。開標籤大寫<Schedule>,結束標籤小寫</schedule>。這是導致XML串行器錯誤。嘗試大寫結束標記</Schedule>。此外,您還沒有在此處發佈HTML,因此我假設您創建的HTML文件包含一些div或其他具有「teamlist」標識的html元素。如果是這種情況,假設您的所有3個文件(xml,xslt,html)位於Web服務器上的同一目錄中,那麼在修復XML標記之後,您應該能夠看到下拉列表。如果您嘗試在本地加載它們,某些瀏覽器可能會發出跨域警告。

接下來,您需要重構您的XML方案。 <Team>節點應該全部屬於同一父節點<Teams>節點。你們都屬於不同的父節點。像這樣重組:

<Schedule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
    <Teams> 
     <Team>Sandlot</Team> 
     <Team>Rangers</Team> 
     <Team>little guys</Team> 
    </Teams> 
    <Game status="Played"> 
     <Home_Team>Sandlot</Home_Team> 
     <Away_Team>Rangers</Away_Team> 
     <Date>2014-01-10</Date> 
     <Home_Team_Score>7</Home_Team_Score> 
     <Away_Team_Score>9</Away_Team_Score> 
    </Game> 
</Schedule> 

然後,您需要更改您的XSLT模板。這裏是我有:

<?xml version="1.0" encoding="UTF-8" ?> 

<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="/"> 
     <table class="listing"> 
      <tr><th>Team</th> 
       <td><select name="teamlist" class="listing" id="teamlist"> 
        <xsl:apply-templates /> 
       </select> 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" align="center"> 
        <input type="button" value="Submit Team" onclick="display()" /> 
       </td> 
      </tr> 
     </table> 
    </xsl:template> 

    <xsl:template match="Team"> 
     <option> 
      <xsl:value-of select="." /> 
     </option> 
    </xsl:template> 

    <xsl:template match="Game"> 

    </xsl:template> 
</xsl:stylesheet> 

現在你可以看到,第一個模板匹配根級「/」,並將模板應用到它。這將循環播放您的團隊節點,並使用第二個模板爲每個節點創建選項。第三個模板與遊戲節點相匹配並且不包含任何輸出 - 這將抑制額外的遊戲信息在選擇標籤中的選項標籤之後呈現。

+0

我有結束標記大寫,我輸錯,當我在這裏在這裏鍵入它是我的身體在HTML <身體的onload =「的init()」> <形式名稱=「sForm」> \t

我已經在上面添加了,它現在顯示下拉列表,但它是空的 – programmerNOOB

+0

我有信息顯示,但不是在下拉框中。它顯示在下面,下拉框仍然是空的。這是基於我對teamlist.xsl樣式表所做的更改以及對XML數據文件中元素的引用 – programmerNOOB

+0

感謝您的額外信息,我可以通過上述更改顯示下拉列表,但試圖合併您的更改,它再次消失在我身上。你如何應用模板/時間表/團隊?這是XSLT的標準嗎?該模板沒有定義。它只是在看那些元素? – programmerNOOB