2016-09-12 5 views
0

いくつかの助けを借りて、1週間以上Webを検索していますが、xmlファイルの検索に関する限られた知識を広げようとしています。 HTML形式。html open xsltと変数を渡す

私はxpathを試しましたが、javascriptの知識は限られており、これを動作させることができませんでした。

私はXMLをスタイルするためにxslに頼っていましたが、私が探しているものをハードコードするととてもうまく動作します。私は入力からHTMLに基づいてこの動的なものを作りたいと思っています。このコードを使ってこの問題を解決しようとすると、見つけたもののhtml側をセットアップする方法の例はほとんどありません。

XSL

<?xml version="1.0" encoding="UTF-8"?> 
 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 
 
    <xsl:param name="skuid" /> 
 
    <xsl:template match="/"> 
 
     <xsl:apply-templates select="//sku[@id=$skuid]" /> 
 
    </xsl:template> 
 
    
 
    <xsl:template match="sku"> 
 
<html> 
 
    <body> 
 
<h2>Availability:</h2> 
 

 
    <table border="1"> 
 
    <tr bgcolor="#9acd32"> 
 
     <th>Sku Code</th> 
 
     <th>Description</th> 
 
\t <th>Due Date</th> 
 
\t <th>Due Qty</th> 
 
\t </tr> 
 
\t <tr> 
 
     <td align="center"><xsl:value-of select="skucode"/></td> 
 
     <td align="center"><xsl:value-of select="description"/></td> 
 
\t <td align="center"><xsl:value-of select="duedate"/></td> 
 
\t <td align="center"><xsl:value-of select="dueqty"/></td> 
 
\t </tr> 
 
\t <tr bgcolor="#9acd32"> 
 
\t <th colspan="2" align="center">Ranged Currrent Cat</th> 
 
\t <th colspan="2" align="center">Ranged Next Cat</th> 
 
    </tr> 
 
    <tr> 
 
\t <td colspan="2" align="center"><xsl:value-of select="currcat"/></td> 
 
\t <td colspan="2" align="center"><xsl:value-of select="nextcat"/></td> 
 
    </tr> \t 
 
    </table> 
 
    </body> 
 
    </html> 
 
\t </xsl:template> 
 
    
 

 
</xsl:stylesheet>

XML

<?xml version="1.0"?> 
 
<?xml-stylesheet type="text/xsl" href="employees2.xsl"?> 
 
<availability> 
 
<sku id="10011"> 
 
<skucode>10011</skucode> 
 
<description>4 Gallon Loft Tank Kit</description> 
 
<duedate>07/09/2016</duedate> 
 
<dueqty>10.00</dueqty> 
 
<currcat>Main Cat In Store</currcat> 
 
<nextcat>Main Cat In Store</nextcat> 
 
</sku> 
 
<sku id="10018"> 
 
<skucode>10018</skucode> 
 
<description>MATT EMULSION PINK 2/5L</description> 
 
<duedate>09/09/2016</duedate> 
 
<dueqty>100</dueqty> 
 
<currcat>Not Ranged</currcat> 
 
<nextcat>Not Ranged</nextcat> 
 
</sku> 
 
<sku id="12345"> 
 
<skucode>12345</skucode> 
 
<description>DeWalt Drill</description> 
 
<duedate>10/09/2016</duedate> 
 
<dueqty>1000</dueqty> 
 
<currcat>Main Cat In Store</currcat> 
 
<nextcat>Main Cat In Store</nextcat> 
 
</sku> 
 
<sku id="98765"> 
 
<skucode>98765</skucode> 
 
<description>Wheel Barrow</description> 
 
<duedate>31/09/2016</duedate> 
 
<dueqty>1</dueqty> 
 
<currcat>Not Ranged</currcat> 
 
<nextcat>Not Ranged</nextcat> 
 
</sku> 
 
</availability>

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
SKU: <input type="text" name="SKU" id="input" maxlength="5"> 
 
<br /> 
 
<input type="submit" value="Submit" onClick="loadXMLDoc()"> 
 
<br /> 
 
<br /> 
 
<div id="results"></div> 
 

 
<script> 
 

 
function loadXMLDoc(dname) 
 
{ 
 
if (window.XMLHttpRequest) 
 
    { 
 
    xhttp=new XMLHttpRequest(); 
 
    } 
 
else 
 
    { 
 
    xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
 
    } 
 
xhttp.open("GET",dname,false); 
 
try {xhttp.responseType="msxml-document"} catch(err) {} // Helping IE 
 
xhttp.send(""); 
 
return xhttp; 
 
} 
 
var y = document.getElementById("input").value; 
 
var x=loadXMLDoc("employees.xml"); 
 
var xml=x.responseXML; 
 
path="/Availability/sku[@id=y]"; 
 

 
// code for IE 
 
if (window.ActiveXObject || xhttp.responseType=="msxml-document") 
 
{ 
 
xml.setProperty("SelectionLanguage","XPath"); 
 
nodes=xml.selectNodes(path); 
 
for (i=0;i<nodes.length;i++) 
 
    { 
 
    document.write(nodes[i].childNodes[0].nodeValue); 
 
    document.write("<br>"); 
 
    } 
 
} 
 

 
// code for Chrome, Firefox, Opera, etc. 
 
else if (document.implementation && document.implementation.createDocument) 
 
{ 
 
var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null); 
 
var result=nodes.iterateNext(); 
 

 
while (result) 
 
    { 
 
    document.write(result.childNodes[0].nodeValue); 
 
    document.write("<br>"); 
 
    result=nodes.iterateNext(); 
 
    } 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

種類パス式

パス= "/状況/ SKU [ID @ = Y]" で

ポール
+0

SO @PaulWillsへようこそ:-)「これはうまく動作しませんでした」ということを少し詳しく説明できますか?何が起こりますか?あなたはhtmlのどこにxsltを参照していますか?コンソールにエラーが表示されますか? –

答えて

0

に関して、

"y"は、 "y"という名前のsku要素の要素子の値を意味し、 "y"という名前のJavascript変数の値を意味しません。

ブラウザのDOM XPath APIにパラメータ値を代入するメカニズムがあるかどうか忘れています。そうでない場合は、文字列連結を使用して、yの値を文字列リテラルとして含むパス式を作成できます。しかし、注射攻撃に注意してください。